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内 容 提要 


本 书 从 前 端 开发 人 员 的 需求 出 发 ， 以 “ 流 ? 为 线索 ， 从 结构 、 内 容 
到 美化 装饰 等 方面 ， 全 面 且 深 入 地 讲解 前 端 开发 人 员 必 须 了 解 和 掌握 
的 大 量 的 CSS 知 识 点 。 同 时 ， 作 者 结合 多 年 的 从 业经 答 ， 通 过 大 量 的 
实战 案例 ， 详 尽 解析 CSS 的 相关 知识 与 常见 问题 。 作 者 还 为 本 书 开发 
了 专门 的 配套 网 站 ， 进 行 实例 展示 、 问 题 答 疑 。 


作为 一 本 CSS 深 度 学 习 的 书 ， 书 中 介绍 大 量 许多 前 问 开 发 人 员 都 
不 知道 的 CSS 知 识 点 。 本 书 语言 通俗 易 履 ， 内 容 深 入 浅 出 ， 并 结合 实 
战 经 验 ， 更 适合 对 CSS 有 所 了 解 的 前 端 开发 人 员 阅 读 。 通 过 阅读 本 
书 ， 读 者 会 对 CSS 世 界 的 深度 和 广度 有 一 个 全 新 的 认识 。 
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我 为 什么 会 写 这 本 书 


我 是 一 个 利他 主义 非常 明显 的 人 ， 这 多 半 与 小 时 候 都 是 在 他 人 的 
帮助 下 成 长 有 关 ， 帮 助 我 的 有 亲戚 、 邻 居 、 老 师 ， 以 及 很 多 不 认识 的 
人 。 所 以 ， 现 在 的 自己 总 是 很 乐意 帮助 他 人 成 长 。 


我 从 2007 年 读 大 三 的 时 候 开 始 接触 并 使 用 CSS， 到 现在 已 经 整整 
10 年 了 ， 在 这 10 年 时 间 里 ， 我 从 未 间断 过 对 CSS 的 研究 和 学 习 。 现 在 
想 想 ， 能 够 坚持 下 来 还 真是 不 容易 ， 其 核心 动力 其 实 就 是 上 面 的 “帮助 
他 人 ， 成 就 自我 ”。 


开始 的 时 候 ， 我 和 大 多 数 人 一 样 ， 因 为 CSS 简 单 ， 一 开始 成 长 很 
快 ， 页 面 写 多 了 之 后 还 能 够 总 结 出 一 些 准则 之 类 的 东西 ， 并 目 我 感觉 
民 好 ， 或 许 是 目 己 运 气 好 ， 误 打 误 接 走 出 了 庐山 幻境 ， 突 破 了 学 习 
CSS 的 一 个 又 一 个 上 瓶颈。 但是， 在 与 诸多 同行 的 邮件 交流 中 我 发 现 ， 
很 多 CSS 开 发 人 员 感 到 迷 荡 ， 职 位 得 不 到 重视 ， 技 术 也 无 法 提高 ， 我 
感觉 邮件 的 交流 一 次 最 多 只 能 帮助 一 个 人 ， 效 率 实 在 太 低 。 


人 在 做 抉择 的 时 候 是 需要 有 一 些 指引 的 。 实 际 上 ， 很 多 年 前 ， 我 
自己 曾 犹 称 过， 是 否 要 继续 深入 学 习 CSS， 探 索 每 一 个 边界 ， 因 为 对 
于 个 人 而 言 ， 这 会 是 一 件 吃力 不 讨好 的 事情 ， 对 于 CSS 这 门 语言 ，3 征 
学 习 80 分 和 10 年 学 习 90 分 对 于 产品 价值 的 区 别 其 实 有 限 。 但 那 一 封 圭 


交流 邮件 坚定 了 目 己 的 方向 ， 艰 将 的 路 让 我 一 个 人 走 惑 好 了 ， 等 我 路 
允 整 个 CSS 世 界 ， 再 把 完整 的 地 图 绘制 出 来 ， 央 不 融 能 帮助 更 多 人 
下、 


所 以 ， 随 着 目 己 的 不 断 前 行 ， 喘 边 的 人 越 来 越 少 ， 少 a 到 好 像 束 我 
一 个 人 ,无比 孤 我 的 时 候 ， 让 我 坚持 下 来 的 束 古 “日 后 可 以 帮助 更 多 
人 ， 是 很 有 价值 的 ”的 信念 。 


10 年 过 去 了 ，10 年 的 努力 和 付出 终于 开始 开花 结果 ， 而 其 中 一 个 
果实 就 是 《CSS 世 界 》 这 本 书 。 


10 年 风 十 积累， 踏 通 CSS 世 界 的 千 山 万 水 ， 哪 里 有 美景 ， 哪 里 有 
秘境 ， 哪 里 是 陷阱 ， 哪 里 是 路 径 ， 我 全 了 然 于 心 。 我 这 样 做 为 的 殴 是 
给 予 清晰 明确 的 指引 ， 拓 展 对 CSS 世 界 的 认 知 ， 挖 据 CSS 的 潜力 ， 帮 
助 他 人 突破 一 个 又 一 个 CSS 学 习 的 席 贷 。 


为 何 需 要 这 本 CSS 进 阶 书 


大 家 应 该 都 注意 到 了 ， 节 近 行 业 非 常 缺 前 端 开 发 人 员 ， 前 端 开发 
人 员 培 训 机 构 也 如 雨 后 春 黎 般 大 量 请 现 。 拨 开眼 前 的 面纱 ， 定 睛 一 
看 ， 会 发 现 ， 缺 的 其 实 不 是 前 端 ， 而 是 优秀 的 、 有 资历 的 、 技 术 有 深 
度 的 前 端 开发 人 员 。 


通过 和 一 些 前 端 同行 、 某 些 人 力 资源 接触 和 我 收 到 的 诸多 简历 我 
发 现 ， 目 前 的 现状 是 这 样 的 : 行业 里 有 很 大 一 拨 儿 人 ， 也 自称 为 前 端 
开发 人 员 ， 但 他 们 仅仅 是 可 以 根据 设计 稿 写 出 页 面 这 种 水 平 。 换 句 话 
说 ， 就 是 会 HTML 和 CSS 以 及 一 点 儿 JavaScript。 环 顾 四 周 ， 这 种 程度 


的 人 实在 是 太 多 了 ， 完 全 没有 任何 技术 上 的 优势 。 虽 然 这 些 也 是 前 端 
开发 人 员 ， 但 是 公司 要 抢 的 前 端 开 发 人 员 并 不 是 这 类 人 。 


为 什么 会 这 样 呢 ? 


因为 CSS 这 门 语 言 入 门 实在 是 太 简 单 了 ， 比 如 说 我 夫人 ， 完 全 不 
懂 代 码 ， 我 手把手 教 她 1 个 星期 ， 写 出 一 个 长 得 像 某 某 网 首页 的 页 面 绝 
对 是 没 问 题 的 ， 因 为 CSS 常 用 属性 束 那 么 多 ， 且 鲜 有 逻辑 ， 无 须 算 
法 ， 熟 记 各 个 属性 值 对 应 的 特性 就 能 上 手 了 。 所 以 ， 很 多 没有 编程 基 
础 的 人 ， 束 通过 HTML 和 CSS 进 入 了 这 个 圈子 。 但 当 他 们 发 现 目 己 可 
以 很 愉快 地 实现 页 面 的 时 候 ， 束 会 舰 得 CSS 也 就 这 样 ， 导 致 困 于 访 
山 ， 止 步 不 前 ， 就 算 日 后 听 到 或 见 到 <*CSS 深 入 很 难 ” 的 言论 并 打算 着 
手 精 进 ， 也 不 知道 授 下 来 该 怎么 走 、 如 何 突破 现 有 的 瓶 席 ， 于 是 就 产 
生 了 迷茫 。 


这 类 高 不 成 低 不 束 的 前 病人 员 和 急需 本 书 深 入 "CSS 世界”， 突 破 瓶 


贷 ， 告 别 迷 荡 。 


在 这 个 世界 上 ， 越 是 看 似 位 单 的 东西 反而 越 是 难以 深入 ， 束 好 比 
为 何 1+1 等 于 2? CSS 这 门 语 言 也 是 如 此 。 很 多 目 认 为 学 了 CSS 有 八 九 
成 的 人 ， 实 际 上 仅仅 是 熟 记 CSS 手 册 中 的 各 种 属性 ， 或 者 理解 一 些 
CSS 概 您 ， 再 进一步 ， 甚 至 对 有 某 一 两 个 CSS 属 性 有 过 深入 的 分 析 。 但 
是 ， 这 些 人 依然 无 法 理解 很 多 页 面 上 看 似 简单 的 现象 (我 想 更 多 的 是 
根本 束 没 在 意 这 些 现象 ，， 也 无 法 基于 现 有 的 规则 创造 一 些 完全 创新 
的 CSS 实 现 ， 仅 仅 停 留 在 熟练 地 使 用 这 种 程度 。 


为 什么 会 这 样 呢 ? 那 是 因为 CSS 是 一 门 有 别 于 传统 程序 语言 的 语 
言 。 绝 大 多 数 编程 语言 ， 比 方 说 JavaScript， 各 种 字符 串 、 数 组 、 方 
法 ， 记 住 一 个 就 是 一 个 ， 使 用 的 时 候 ，forEach( ) 就 是 循环 ， 
replace( ) 束 是 蔡 换 ， 不 要 担心 执行 replace( ) 的 时 候 字 符 串 突然 
增加 了 ! 很 多 人 就 是 用 这 种 思路 学 习 CSS 的 ， 导 致 很 快 就 遇 到 了 天 花 
板 。 为 什么 呢 ? 这 是 因为 ， 在 CSS 的 世界 里 ， 页 面 上 的 任何 看 似 简单 
的 呈现 都 是 由 许 许 多 多 CSS 属 性 共同 作用 的 结果 。 例 如 ， 对 于 一 个 图 
片 浮动 ， 单 纯 认 为 只 有 f1loat 在 工作 是 不 全 面 的 ， 实 际 上 ， 行 高 、 字 
体 、 鼠 标 手 形 等 都 在 暗地里 “搞鬼 ”"， 此 时 如 果 仅 仅 套用 一 两 个 CSS 属 
性 值 应 有 的 表现 来 理解 ， 是 根本 理解 不 了 的 。 换 句 话 说， 有 些 人 的 
CSS 水 平 之 所 以 停滞 不 前 ， 是 因为 他 们 没有 把 所 有 的 CSS 当 作 一 个 整 
体 ， 放 在 一 个 完整 的 世界 中 去 看 待 。 所 以 ， 没 有 比 “ 学 CSS 看 看 CSS 中 
文 手 册 就 够 了 ”更 思春 的 言论 了 ， 手 册 仅 仅 是 表层 的 、 独 立 的 一 些 特 
性 ， 每 个 CSS 属 性 在 CSS 世 界 中 都 是 有 其 存在 的 原因 的 ， 都 是 和 其 他 
多 个 CSS 属 性 发 生 着 千 丝 万 缕 的 关系 的 ， 这 背后 的 种 种 远 比 他 们 想象 
得 要 庞大 很 多 。 


而 本 书 完 完 全 全 区 别 于 传统 教条 式 的 手册 或 参考 书 或 教程 之 类 ， 
一 步 一 步 市 领 读 者 接触 真正 丰富 多 彩 、 妙 趣 横生 的 CSS 世 界 ， 一 番 畅 
快 目 在 的 CSS 世 界 之 旅 下 来 ， 读 者 一 定 会 得 到 不 一 样 的 "洗礼 "， 困 护 
多 年 的 CSS 成 长 瓶颈 说 不 定 怠 会 不 知 不 觉 地 突破 了 。 


如 何 正 确认 识 本 书 


首 爷 ， 大 家 务必 明确 这 一 点 ， 那 吏 是 本 书 的 所 有 内 容 都 是 我 个 人 
的 理解 。 没 错 ， 和 是 人 的 理解 ， 不 是 干巴 巴 的 文档 。 这 些 理解 是 我 目 己 
多 年 持之以恒 对 CSS 人 研究 和 思考 后 ， 经 过 个 人 情感 润 饰 和 认 知 提炼 加 
工 的 产物 ， 完 全 是 我 自己 所 理解 和 认识 的 CSS 世 界 ， 可 能 是 不 具有 权 
威 性 的 。 写 这 本 书 主要 是 布 望 通过 分 至 目 己 的 心得 给 对 CSS 感 兴趣 的 
各 个 领域 的 人 以 局 迪 ， 引 发 其 思考 ， 或 者 使 其 有 不 一 样 的 感悟 。 


从 另 一 方面 讲 ， 本 书 正 是 因为 其 内 容 都 是 经 过 人 这 个 个 体 的 加 
工 ， 并 融入 了 情感 化 的 思维 ， 才 能 做 到 有 的 放 天 、 通 俗 易 懂 。 我 们 大 
多 数 人 都 是 感性 的 ， 看 伤感 电影 会 夫 ， 看 综 忆 万 目 会 突 。 所 以 ， 与 干 
巴巴 的 教条 式 的 技术 书籍 相 比 ， 本 书 的 表达 方式 和 语言 风格 更 能 给 
以 心灵 的 局 迪 。 读 完 之 后 ， 读 者 可 能 会 有 这 样 的 想法 : 要 是 所 有 的 技 
术 书 都 这 么 写 束 好 了 。 


另外 ， 本 书 不 是 技术 文档 ， 也 不 是 参考 手册 ， 因 此 知识 点 不 会 面 
面 俱 到 ， 也 就 是 说 ， 不 少 CSS 相 关 的 内 容 我 会 急 略 ， 例 如 ， 选 择 器 这 
-部 分 最 多 提 一 下 。 同 时 ， 为 了 保证 书 的 内 容 足 够 简练 ， 简 单 的 CSS 
语法 和 篆 规 的 使 用 在 本 书 中 基本 上 不 会 握 及 ， 只 会 重点 分 析 在 其 他 地 
方 看 不 到 的 内 容 。 


配套 网 站 


我 专门 为 本 书 制作 了 一 个 网 站 (http://www.cssworld.cn) ， 在 这 个 
配套 网 站 读者 可 以 了 解 更 多 关于 本 书 或 者 我 个 人 的 一 些 信 息 。 


最 后 ， 由 于 很 多 内 容 都 是 个 人 理解 ， 难 人 免 会 有 不 准确 或 者 让 大 家 
产生 怀疑 的 地 方 ， 欢 迎 去 官方 论坛 http://bbs.cssworld.cn/ 对 应 版 块 进行 
提问 或 反馈 。 
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衷心 感谢 人 民 邮 电 出 版 社 的 每 一 个 人 。 


感谢 人 民 邮 电 出 版 社 的 编辑 杨 海 玲 ， 她 的 专业 建议 对 我 帮助 很 
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的 道路 上 可 以 走 得 更 快 、 更 踏实 。 


感谢 读者 ， 你 们 的 支持 给 了 我 工作 的 动力 。 


最 后 ， 最 最 感谢 我 的 妻子 丹 丹 ， 没 有 她 在 背后 的 爱 和 文 持 ， 本 书 
一 定 不 会 完成 得 这 么 顺利 。 


第 1 章 ”概述 


要 深入 理解 一 个 事物 之 前 ， 最 好 先 对 其 整体 有 个 大 概 了 解 ， 这 样 才 不 至 于 
画 测 管 室 。 如 果 把 CSS 比 作 一 座 大 山 ， 则 我 们 对 整体 的 认 知 就 好 比 知道 这 座 山 
的 位 置 、 山 势 、 道 路 状况 等 ， 这 样 ， 当 我 们 深入 其 中 的 时 候 ， 束 不 容易 迷路 ， 
不 会 做 出 错误 的 决策 。 


例如 ， 对 CSS 这 门 语言 特性 的 描述 束 有 助 于 对 CSS 的 整体 认 知 。 具 体 才 现 
为 : 擅长 C++ 或 者 Java 之 类 的 程序 员 学习 CSS 往 往 没 有 如 鱼 得 水 的 感觉 ， 其 背 
后 的 原因 是 ， 典 型 的 计算 机 开发 语言 看 重 逻 辑 思维 和 抽象 能 力 ， 但 是 CSS 这 门 
语言 本 身 并 无 逻辑 可 言 ， 看 重 的 是 特性 间 的 相互 联系 和 具象 能 


具象 往往 以 情感 为 纽带 ， 无 意识 不 目 觉 产生 ， 有 是 非常 感性 的 一 种 能 力 ， 这 
往往 是 偏 理 性 的 程序 员 所 不 擅长 的 。 在 某 些 程序 员 有 眼中，CSS 属 性 就 是 干巴 巴 


的 属性 ， 无 法 建立 类 似 “ 人 与 人 关系 ”这 种 很 情感 化 的 联系 ， 于 是 学 习 CSS 总 是 
只 得 其 形 、 不 得 其 人 艇 。 


当然 ， 认 知 可 以 从 多 个 角度 进行 。 例 如 ， 接 下 来 要 介绍 的 CSS“ 世 界 观 ”以 
及 CSS 的 历史 故事 ， 可 以 让 我 们 多 种 角度 同时 进行 认 知 ， 对 CSS 这 门 语言 的 理 
解 更 为 准确 和 丰满 。 


1.1 CSS 世 界 的 “世界 观 ” 


对 于 CSS 这 [| 语 言 ， 我 学 习 和 研究 已 经 有 10 年 之 久 ， 在 点 点 滴 滴 的 积 素 
中 ， 逐 渐 形成 了 一 套 完整 的 体系 。 在 CSS 这 个 世界 中 ，CSS 并 不 是 一 个 机 械 村 
燥 的 语言 ， 所 有 属性 都 是 有 血 有 了 肉 、 有 着 不 同 个 性 和 身世 的 个 体 。 不 同 的 个 体 
可 以 碰撞 出 不 同 的 火花 ， 激 荡 出 异彩 纷呈 的 故事 。 


这 里 ， 我 们 不 妨 “ 脑 洞 大 开 * 一 下 ， 如 果 把 CSS 世 界 拍 成 动漫 的 话 ， 会 是 什么 样 
子 ? 


首先 ， 动 漫 名 可 以 叫 作 《 建 筑 神 域 》， 讲 述 一 群 建筑 魔法 师 为 国家 存亡 惊心动魄 
战斗 的 故事 。 然 后 ， 出 现 了 “Chrome 王 国 ” 的 几 位 建筑 魔法 师 日 常 训练 的 画面 。 只 见 名 
为 width 的 魔法 师 手 持 名 叫 选择 器 的 法 器 ， 准 确 指向 称 为 <div> 的 最 普通 的 块 状 建筑 
魔法 石 ， 口 中 念 道 :“ 层 县 天 星 ， 幻 化 有 形 ，50%， 变 ! ”只 听见 一 声 清 脆 的 “ 哟 ”， 
<div> 魔 法 石 宽度 变 成 了 原来 的 一 半 。 然 而 ，width 却 锁 眉 播 头 ， 口 中 喃 喃 念 道 : “1 
毫秒 ， 还 不 够 快 ， 还 要 再 练 ， 不 然 在 和 ‘IE 王 国 * 的 战斗 中 很 难 占 得 先 机 ! ”( 如 图 1-1 
所 示 ) 。 


<div> 魔 法 石 


图 1-1 CSS 世界 观 示意 1 


此 时 ，width 突 然 发 现 前 面 1 米 之 处 有 一 块 <span> 之 石 ， 具 有 
class="test" 的 特殊 标记 ， 立 即 拿 出 法 器 ， 念 道 : “类 名 之 石 ，test 为 名 ， 为 我 选 
择 ， 出 ! ”话音 刚 落 ，<span> 之 石 监 色 痰 光一 内 ， 明 眼 人 都 能 看 出 来 ，width 魔 法 师 
和 <span> 魔 法 石 现在 处 于 契约 状态 。width 继 续 念 道 :“ 层 县 天 星 ， 幻 化 有 形 ， 


Cy 


50%， 变 ! "但 <span> 魔 法 石 却 没有 任何 变化 ， 此 时 width 一 拍 自己 的 脑门 ， 似 乎 明 
白 了 什么 ， 转 过 头 对 旁边 的 display 魔 法 师 大 声 叫 道 :“ 小 D， 这 边 这 边 ， 过 来 帮 个 
忙 ..….. 来 咋 ， 快 点 .…..” 


只 见 displ1ay 迅 速 结束 自己 的 练习 ， 屁 其 屁 颠 跑 过 来 :“ 咋 啦 ? ” 


“此 为 内 联 之 石 ， 我 无 法 轨 驭 ， 你 帮 我 重 塑 一 下 。” 


“小 问题 ! 正好 ， 魔 法 师 技能 委员 会 刚 通过 了 我 的 一 个 新 法 术 ， 我 给 你 秀一 秀 ? ” 


“ 哟 ， 不 错 啊 ， 快 让 我 本 上 隔 ! ” 


“好 嘲 ! "只 见 display 拿 出 自己 的 法 器 ， 念 道 : “类 名 之 石 ，test 为 名 ， 为 我 选 
择 ， 出 ! ” 紧 接 着 ,“ 层 玛 天 星 ， 约 化 有 形 ，flex， 变 ! ” 


只 听见 一 声 清 脆 的 “ 哟 ”， 在 两 人 的 合作 之 下 ，<span> 魔 法 石 宽度 也 变化 了 (如 
图 1-2 所 示 ) 


~ cn 


图 1-2 CSS 世界 观 示意 2 


“ 哟 ， 很 酷 嘛 ! ”width 对 display 坚 着 大 拇指 称赞 道 。 


只 见 display 盯 膜 一笑， 小手 在 面前 轻 轻 一 挥 :“ 就 算 你 这 么 奔 我 ， 人 家 也 不 会 


从 上 面 的 描述 可 以 看 出 ， 在 CSS 世 界 中 ，HITML 是 魔法 石 ， 选 择 器 就 是 选 
择 法 器 ，CSS 属 性 就 是 魔法 师 ，CSS 各 种 属性 值 就 是 魔法 师 的 魔法 技能 ， 浏 宽 
器 就 是 他 们 所 在 的 “王国 ”>, “王国 ”会 不 断 更 新 法 律 法 规 (版 本 升级 ， 决 定 是 
否 允 许 使 用 新 的 魔法 石 (HTML5 新 标签 新 属性 ) ， 是 否 允 许 新 的 魔法 师 入 “ 
籍 ”(CSS3 新 属性 ) ， 或 者 允许 魔法 师 使 用 某 些 新 技能 (CSS 新 的 属性 值 )， 
以 及 是 否 舍弃 某 些 魔法 技能 (如 display :run-in) ; 操作 系统 就 是 他 们 所 
在 的 世界 ， 不 同 的 操作 系统 代表 不 同 的 平行 世界 ， 所 以 ，CSS 世 界 有 这 么 几 个 
比较 大 的 平行 世界 ， 即 Windows 世 界 、OS X 世 界 以 及 移动 端的 iOS 世 界 和 
Android 世 界 。 不 同 世界 的 浏览 器 王国 的 命运 不 一 样 ， 例 如 ， 在 OS X 世 界 中 ， 
下 于 国 是 不 存在 的 ， 而 Safari 王 国 却 异 常 强 大 ， 但 在 Windows 世 界 中 ，Safari 王 
国 却 异常 落寞 。 


到 


以 上 这 一 切 束 构成 了 完整 的 CSS 世 界 的 “世界 观 ”。 


下 面 回答 一 个 很 重要 的 问题 : 为 何 要 这 样 认识 CSS 世 界 呢 ? 


首先， 将 抽象 的 CSS 直 接 和 具体 的 现实 世界 相对 应 ， 更 加 易于 理解 。 试 想 
一 下 ， 对 于 普通 人 ， 理 解 魔法 师 和 魔法 石 是 不 是 要 比 理 解 CSS 代 码 容易 得 多 ? 
其 次 ， 以 完整 的 体系 来 学 习 CSS 要 比 单纯 关注 属性 值 理解 得 更 加 深刻 ， 可 以 培 
养 从 安 观 层面 认识 与 理解 CSS 的 习惯 。 再 次 ， 这 也 方便 我 们 记忆 ， 桔 燥 的 代码 
总 是 过 目 就 迄 ， 鲜 活 的 角色 总 是 印象 深刻 。 最 后 ， 这 样 也 可 以 让 本 书 散发 出 与 
众 不 同 的 气质 。 


1.2 ”世界 都 是 创造 出 来 的 


世界 都 是 创造 出 来 的 。 很 自然 ，CSS 世 界 也 是 一 点 一 点 创造 出 来 的 。 这 世 
间 上 的 事情 只 要 发 生 了 ， 痢 是 有 原因 的 。CSS 世 界 的 出 现 也 不 例外 。 


下 面 我 们 就 来 看 一 下 CSS 世 界 出 现 的 历史 。 虽 然 我 知道 ， 有 些 人 对 这 些 历 
史 可 能 不 感 兴趣 ， 但 是 要 想 深入 理解 CSS 属 性 的 一 些 设计 原因 、 表 现 原理 还 真 
离 不 开 当时 的 历史 环境 。 


大 家 可 能 都 听 说 过 马云 1995 年 去 美国 ， 第 一 次 接触 了 互联 网 ， 在 这 个 时 间 
点 ，HTML 才 是 第 一 版 且 诞 生 没 几 年 ，Ww3C 才 刚刚 成 立 ，CSS 还 没 出 现 。 那 时 
候 的 互联 网 几乎 都 是 文字 信息 ， 显 示 一 张 图 片 都 是 要 上 天 的 感觉 。 


大 家 可 能 没 意 识 到 ， 那 个 时 候 前 端的 发 展 和 现在 一 样 快 ， 设 计 师 要 求 越 来 
越 多 ，HTML 也 越 来 越 庞杂 。 和 急需 要 其 他 专门 负责 样式 的 语言 ， 据 说 当时 有 几 
个 样式 表 语 言 ， 最 后 是 CSS 胜 出 了 ， 为 什么 呢 ? 它 的 胜出 靠 的 是 “ 层 琶 ”特性 。 


CSS 全 称 是 Cascading Style Sheets， 翻 译 成 中 文 就 是 “ 层 车 样式 表 ”。 所 
谓 “ 层 琶 >”， 顾 名 思 义 ， 束 是 样式 可 以 层 层 累加 ， 比 方 说 页 面 元 素 都 继承 了 12 像 
素 的 大 小 ， 某 标题 就 可 以 设置 成 14 像 素 进行 琶 加 。 发 现 没 ?” 这 种 层 琶 策略 对 于 
样式 的 显示 是 相当 的 灵活 。 


于 是 ， 从 1996 年 12 月 17 日 CSS1 诞 生 后 ，CSS 在 样式 呈现 领域 可 谓 所 向 披 
没有 遇 到 任何 竞争 对 手 。1998 年 5 月 12 日 CSS2 发 布 ， 推 行内 容 和 表现 分 
表格 (table) 布局 开始 落寞 。 


1998 年 腾讯 、 新 浪 和 网 易 成 立 ， 当 时 搜狐 则 成 立 1 年 不 到 。 那 个 时 候 是 门 
户 的 时 代 ， 人 们 更 关注 的 是 信息 的 获取 ， 所 以 网 站 的 功能 主要 就 是 信息 展示 ， 
言 息 是 什么 ? 在 那个 时 代 ， 在 互联 网 领域 ,信息 就 是 图 片 和 文字 。 换 句 话 说 ， 
那 时 候 的 网 站 前 端 技术 关心 的 是 图 片 和 文字 的 呈现 ， 而 CSS2 (包括 9 年 之 后 ， 
也 就 是 2007 年 才 出 现 的 CSS2.1) 都 是 为 图 文 展示 服务 的 。 


我 再 重复 一 遍 :CSS 世界 的 诞生 就 是 为 图 文 信息 展示 服务 的 。 这 句 话 在 本 
书 中 会 非常 频繁 地 出 现 ， 知 道 这 一 点 你 就 会 明日 很 多 事情 。 


好 ， 下 面 让 我 们 回 到 本 市 开头 的 那 句 话 一 一 “世界 都 是 创造 出 来 的 ”! 为 何 
我 要 反复 强调 这 句 话 呢 ? 如 果 站 在 造物 主 的 角度 去 思考 CSS 世 界 的 种 种 表现 ， 
很 多 问题 殉 会 迎刃而解 。 


现在 给 你 机 会 当 一 回 造物 主 ， 让 你 自己 重新 构建 一 个 CSS 世 界 ， 唯 一 的 要 
求 就 是 ， 这 个 世界 要 非常 便于 图 片 和 文字 的 呈现 ， 你 会 去 如 何 构建 呢 ? 
1.3 ”CSS 完胜 SVG 的 武器 流 


在 2003 年 1 月 ，SVG 1.1 被 确立 为 W3C 标 准 。 你 没 看 错 ， 是 2003 年 。 要 知 
道 ，CSS 2.1 是 2007 年 才 发 布 的 。 考 虑 到 SVG 开始 火 起 来 是 最 近 几 年 ， 也 就 是 
差不多 10 年 的 时 间 ，SVG 都 默默 无 闻 ， 鲜 有 人 问津 ， 到 底 是 怎么 回 事 呢 ? 


很 多 人 认为 SVG 的 竞争 对 手 是 Flash。 对 ， 是 竞争 对 手 。 但 是 ， 现 在 看 
来 ，SVG 显 然 要 比 Flash 优 秀 很 多 ，SVG 开 放 、 标 准 ， 和 CSS 和 JavaScript 都 能 很 
方便 地 进行 交互 ， 如 果 单 纯 SVG 和 Flash 比 ， 难 说 谁 胜 谁 负 。 在 我 看 来 ， 造 成 


SVG 被 冷落 10 年 的 原因 不 是 别 的 ， 正 是 看 似 坚 不 相关 的 CSS，SVG 是 被 CSS 给 
打败 的 。 


正如 上 面 提 到 的 ， 在 很 长 一 段 时 间 里 ， 网 站 的 主要 功能 都 是 图 片 和 文字 信 
息 的 展示 ， 但 是 ，SVG 的 强项 是 图 形 ， 其 文字 内 容 的 呈现 实在 不 敢 恭维 。 举 个 
例子 ， 在 CSS$ 中 写 上 一 段 文字 ， 这 上 段 文字 会 和 目 然 换行 、 多 行 显示 ， 于 是 ， 可 以 
像 书本 一 样 阅读 ， 但是， 在 SVG 中 ， 文 字 要 上 自动 折 行 ， 感觉 有 点 儿 赶 蝎子 上 架 
强人 所 难 。 人 家 一 看 ，SVG 连 基本 的 文字 排版 都 做 不 好 ， 要 SVG 何 用 ? 于 
是 ，SVG 被 < 打 入 冷 宫 ”"，CSS 一 如 既往 被 重用 。 


但 是 ， 如 今 技 术 得 到 了 发 展 ，Web 呈 现 更 加 复杂 和 丰富 多 彩 ， 图 文 显示 仅 
仅 是 网 页 功能 的 一 部 分 ， 于 是 ， 矢 量 且 图 形 领域 硕 有 造 齐 的 SVG 开始 迎 来 了 自 
己 的 第 一 春 。 


不 知 大 家 有 没有 思考 过 这 样 的 问题 : 为 什么 CSS 世 界 的 图 文 显 示 能 力 那么 
强 ? 为 什么 它 可 以 抑制 SVG 这 么 多 年 ? 


答案 就 是 : 流 ! 
1.3.1 何 为 “ 流 ” 


和 CSS 有 过 亲密 接触 的 人 一 定 听 过 “文档 流 ” 这 个 概念 ， 我 个 人 总 是 习惯 
把 "文档 ”二 字 去 掉 ， 直 接 称 为 “ 流 ”( 纯 粹 个 人 爱好 ， 因 为 够 简洁 ) 。 听 过 它 的 
人 很 多 ,但 是 ,深入 思考 过 “ 何 为 流 ? ”这 个 问题 的 人 怕 是 就 没 这 么 多 了 。 


那 究竟 CSS 世 界 中 的 “* 流 ” 指 的 是 什么 呢 ?“ 流 ”实际 上 是 CSS 世 界 中 的 一 种 
基本 的 定位 和 布局 机 制 ， 可 以 理解 为 现实 世界 的 一 套 物理 规则 ，“ 流 ” 跟 现实 世 
界 的 “水 流 ”* 有 异曲同工 的 表现 。 


现实 世界 中 ， 如 有 果 我 们 让 水 流入 一 个 容器 ， 水 面 一 定 是 平整 的 ;我 们 在 水 
里 面 放 入 物体 ， 如 普通 的 木头 ， 此 时 水 位 束 会 上 升 ， 木 头 多 半 泽 在 水 面 上 ， 但 
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只 露出 一 点 点 头 ， 如 图 1-3 所 示 。 这 些 现 象 我 们 都 会 认为 是 理所当然 的 ， 因 为 
这 就 是 我 们 从 小 接触 的 一 套 物 理 规则 。 我 们 知道 这 套 规 则 ， 就 可 以 理解 现象 ， 
并 且 预 知 现象 。 例 如 ， 水 量 超过 容器 的 容积 很 多 ， 我 们 避 ® 可 以 预测 到 水 会 洲 出 
交流 


感谢 物理 学 ， 它 让 我 们 理解 CSS 世 界 的 “ 流 ” 就 轻松 多 了 “。CSS 世 界 
的 “ 流 ” 似 乎 就 是 按照 物理 世界 的 “水 流 ” 创 造 的 。 


CSS 世 界 构 建 的 基石 是 HTML， 而 HTML 最 具 代 表 的 两 个 基石 <div> 和 
<span> 正 好 是 CSS 世 界 中 块 级 元 素 和 内 联 级 元 素 的 代表 ， 它 们 对 应 的 正 是 图 
1-3 所 示 的 盛 水 容器 中 的 水 和 木头 ， 其 特性 表现 也 正如 现实 世界 的 水 和 木头 ， 
如 图 1-4 所 示 。 


水 流 会 自动 铺 满 容 器 放 入 木头 ， 水 位 升 高 ， 木头 依次 排列 
图 1-3 流 
div 自 动 铺 满 容器 图 片 文 字 依 次 排列 ， 不足 则 换行 


图 1-4 CSS 世界 构建 的 基石 HTML 


所 以 ， 所 谓 “ 流 ”， 束 是 CSS 世 界 中 引导 元 素 排列 和 定位 的 一 条 看 不 见 的 “水 


1.3.2” 流 是 如 何 影响 整个 CSS 世 界 的 


在 CSS2.1 时 代 ， 我 们 直接 称 CSS 为 “ 流 的 世界 ”真是 一 点 儿 也 不 为 过 ， 整 个 
CSS 世 界 儿 乎 就 是 围绕 “< 流 ”来 建立 的 ， 那 么 流 是 如 何 影响 整个 CSS 世 界 的 呢 ? 


(1) 扒 贼 先 扒 王 。 因 为 CSS 世 界 的 基石 是 HTML， 所 以 只 要 让 HTML 默 认 
的 表现 符合 * 流 ”， 那 么 整个 CSS 世 界 就 可 以 被 < 流 ” 统 治 ， 而 事实 就 是 如 此 ! 


(2) 特殊 布局 与 流 的 破坏 。 如 果 全 部 都 是 以 默认 的 “ 流 ” 来 泻 染 ， 我 们 只 
能 实现 类 似 W3C 那 样 的 文档 网 页 ， 但 是 ， 实 际 的 网 页 是 有 很 多 复杂 的 布局 的 ， 
怎么 办 ? 可 以 通过 破坏 “ 流 ” 来 实现 特殊 布局 。 实 际 上 ， 还 是 和 “ 流 ” 打 交道 。 


(3) 流向 的 改变 。 上 默认 的 法 辣 是 “一 江 春 水 同 东 流 ”， 以 及 “ 飞 流 直下 三 干 
尺 ”。 然而 ， 这 种 流 癌 我 们 是 可 以 改变 的 ， 可 以 让 CSS 的 展现 更 为 丰富 。 因 
此 ,， “文档 流 从 左 往 右 自 上 而 下 ”这 种 说 法 是 不 严谨 的 ， 大 家 一 定 要 纠正 过 来 。 


好 了 ， 下 面 我 想 反 问 大 家 : 如 琳 你 是 造物 主 ， 你 会 想到 设计 “ 流 ” 这 僚机 制 
来 实现 强大 的 图 文 排列 功能 吗 ? 


好 好 想 一 想 .…… 是 不 是 觉得 目前 CSS 的 设计 还 是 很 有 智慧 的 ? 如 果 你 来 重 
新 设计 CSS， 实 现 图 文 排列 ， 你 是 否 还 有 其 他 的 设计 思路 ， 比 方 说 “ 杀 缘 机 
制 " 之 类 ? 


适当 地 反问 这 些 问题 ， 通 过 逆 问 思维 ， 会 让 我 们 对 CSS 世 界 有 另外 一 个 角 
度 的 认识 。 


1.3.3 ”什么 是 流体 布局 


所 谓 “ 流 体 布局 ”， 指 的 是 利用 元 素 “ 流 ”的 特性 实现 的 各 类 布局 效果 。 
为 “ 流 ” 本 号 具有 目 适 应 特性 ， 所 以 “流体 布局 ”往往 都 是 具有 目 适 应 性 的 。 但 
征 , “流体 布局 "并 不 等 同 于 “ 目 适 应 布局 ”。“ 目 适应 布局 ”是 对 凡是 具有 目 适 应 


特性 的 一 类 布局 的 统称 ，“ 流 体 布局 ”要 狭窄 得 多 。 例 如 ， 表 格 布 局 也 可 以 设置 
为 100% 自 适应 ， 但 表格 和 * 流 ?不 是 一 路 的 ， 并 不 属于 “流体 布局 ”。 


CSS 中 最 常用 的 魔法 石 ， 也 就 是 最 常 使 用 的 HTML 标 签 ， 征 <div>， 而 
<div> 是 典型 的 具有 “ 流 ” 竺 性 的 元 素 ， 因 此 ， 曾 经 风靡 的 “div+CSS 布 局 ”， 实 
际 上 指 的 束 是 这 里 的 “流体 布局 ”。 


1.4 CSS 世界 的 开启 从 IE8 开 始 


本 书 书 名 为 《CSS 世 界 》， 这 里 的 “世界 ” 特 指 的 是 CSS2.1 的 世界 ， 并 不 包 
括 CSS3，CSS3 的 世界 更 为 庞杂 和 宏大 ， 但 CSS2.1 的 世界 已 经 足够 我 们 畅游 很 
多 年 了 。 现 在 前 端 技术 发 展 迅 猛 ， 加 上 和 氛围 略 显 浮躁 ， 有 必要 让 广大 前 端 开发 
人 员 静 下 心 来 认识 CSS2.1 的 世界 ， 否 则 面 对 CSS3 的 真正 到 来 ， 只 能 是 浅水 游 
飞 、 搬 砖 打 杂 。 


对 CSS2.1 的 全 面 文 持 是 从 微软 公司 的 IE8 开 始 的 ， 因 此 ， 本 书 中 几乎 所 有 
特性 、 行 为 表现 都 症 针 对 IE8 以 上 浏 史 器 的 。 


1.5 ” table 自己 的 世界 


如 果 我 没 记 错 的 话 ，<tab1e> 比 CSS 还 要 老 ， 也 就 是 CSS 正 式 诞生 之 前 ， 
<tabJle> 歼 已 经 出 现 了 。 前 面 提 到 了 * 流 影响 了 整个 CSS 世 界 ”， 其 中 并 不 包括 
<table>。<table> 有 着 自己 的 世界 ，“ 流 ”的 特性 对 <table> 并 不 适用 ,一 
些 CSS 属 性 的 表现 ， 如 单元 格 的 vertical-align， 也 和 普通 的 元 素 不 一 
样 。 


虽然 CSS2.1 加 强 了 和 <table> 的 联系 ， 如 对 table 类 别 的 display 属 性 
值 的 支持 等 ， 但 是 本 书 并 不 会 对 <table> 进 行 专门 的 介绍 ， 因 为 毕竟 不 是 同 
一 个 世界 的 。 


1.6 CSS 新 世界 一 CSsS3 


时 代 在 变迁 ， 科 技 在 发 展 ， 人 们 对 互联 网 的 需求 也 在 变化 ， 以 前 的 以 图 文 
ee 双 无 法 满足 用 户 的 需求 。 技 术 总 是 随 着 需求 发 展 的 ， 正 
如 10 年 前 的 图 文 展示 需求 缔造 了 CSS 世 界 一 样 ， 如 今 的 移动 互联 网 以 及 硬件 发 
展 也 带动 CSS 进 入 了 新 的 世界 。 


(1) 布局 更 为 丰富 。 


。 移动 端的 崛起 ， 催 生 了 CSS3 媒 介 查 询 以 及 许多 响应 式 布局 特性 的 出 现 ， 
如 图 片 元 素 的 srcset 属 性 、CSS 的 object-fit 属 性 。 

。 弹性 盒子 布局 (flexible box layout) 终于 熬 出 了 头 。 

。 格 栅 布 局 (grid layonut) 姗 姗 来 迟 。 


(2) 视觉 表现 长 足 进步 。 


。 圆 角 、 阴 影 和 渐变 让 元 素 更 有 质感 。 
。 transform 变 换 让 元 素 有 更 多 可 能 
。 filter 滤 镜 和 混合 模式 让 Web 轻 松 变 成 在 线 的 Photoshop; 


A Ac 


。animation 让 动画 变 得 非常 简单 。 


上 面 提 到 的 全 部 都 是 CSS3 的 新 属性 。 因 为 CSS3 的 设计 初 袁 是 为 了 实现 更 
丰富 、 更 复杂 的 网 页 ， 所 以 基本 上 和 “ 流 * 的 关系 并 不 大 。 可 以 说 ， 和 CSS2 相 
比 CSS3 就 是 一 个 全 新 的 世界 ， 更 加 丰富 ， 更 加 规范 ， 更 加 体系 化 ， 也 更 加 复 
杂 。 考 虑 到 CSS3 尚 未 完全 成 型 ， 且 目 己 尚未 有 足够 深入 的 研究 ， 无 法 同时 区 
狼 太 复杂 的 内 容 ， 因 此 ， 本 书 不 会 深入 CSS3 的 知识 点 。 


第 2 章 ” 需 提前 了 解 的 术语 和 概念 


2.1 务必 了 解 的 CSS 世 界 的 专业 术语 


尽管 本 书 内 容 会 用 很 轻松 的 方式 表达 ， 但 还 是 避免 不 了 会 出 现 一 
些 CSS 领 域 的 专业 术语 。 因 此 ， 在 学 习 技 术 内 容 之 前 ， 我 们 需要 先 了 
解 一 下 CSS 世 界 里 的 一 些 专业 术语 。 


首先 ， 假 设 我 们 现在 有 如 下 一 段 曾 见 的 CSS 代 码 : 


.Vocabulary { 
height: 99px; 
color: transparent; 


下 面 就 针对 这 段 代 码 ， 逐 一 引出 其 涉及 的 专业 术语 。 
1. 属性 

属性 对 应 的 是 平常 我 们 书面 或 交谈 时 对 CSS 的 中 文 称 谓 。 例 如 ， 
上 面 示意 CSS 代 码 中 的 height 和 color 就 是 属性 。 当 我 们 聊天 或 者 分 
享 时 说 起 CSS 的 时 候 ， 嘴 里 冒 出 来 的 都 是 “这 个 元 素 高 度 99 像 素 ”， 或 
者 “这 个 文字 颜色 透明 "”， 对 吧 ? 这 里 提 到 的 “高 度 ” 和 “颜色 ”就 是 CSS 世 
界 的 属性 ， 感 觉 有 点 儿 像 现实 世界 里 人 的 姓氏 。 
2. 值 


“ 值 "大 多 与 数字 挂钩 。 例 如 ， 上 面 的 99px 就 是 典型 的 值 。 在 CSS 
世界 中 ， 值 的 分 类 非常 广泛 ， 下 面 是 一 些 常用 的 类 型 。 


。 整数 值 ， 如 z-index:1 中 的 1， 属 于 <integer>， 同 时 也 属于 
<number>。 

。 数 值 ， 如 Line-height:1,5 中 的 1.5， 属 于 <number>。 

。 百 分 比值 ， 如 padding :50% 中 的 50%， 属 于 <percent>。 

。 长 度 值 ， 如 99px。 

。 颜色 值 ， 如 #999。 


此 外 ， 还 有 字符 串 值 、 位 置 值 等 类 型 。 在 CSS3 新 世界 中 ， 还 有 角 
度 值 、 频 率 值 、 时 间 值 等 类 型 ， 这 里 束 不 全 部 展示 了 。 


3. 关键 字 


顾名思义 ， 关 键 字 指 的 是 CSS 里 面 很 关键 的 单词 ， 这 里 的 单词 特 
指 英文 单词 ，abc 是 单词 吗 ? 不 是 ， 因 此 ， 如 有 末 CSS 中 出 现 它 ， 一 定 
不 是 关键 字 。 上 面 示例 CSS 代 码 中 的 transparent 职 是 典型 的 关键 
字 ， 还 有 常见 的 solid、inherit 等 都 是 关键 字 ， 其 中 inherit 也 称 
作 “ 泛 关键 字 ”， 所 谓 泛 关 键 字 ， 可 以 理解 为 “公交 车 关键 字 ”， 就 是 “所 
有 CSS 属 性 都 可 以 使 用 的 关键 字 ” 的 意思 。 
4. 变量 


CSS 中 日 前 可 以 称 为 变量 的 比较 有 限 ，CSS3 中 的 currentColor 
就 是 变量 ， 非 常 有 用 。 不 过 ， 这 属于 《CSS 新 世界 》 的 内 容 ， 本 书 不 
会 详细 曾 述 ， 有 兴趣 的 读者 可 以 访问 


http://www.zhangxinxu.com/wordpress/?p=4385 或 者 扫 右 侧 的 二 维 码 ， 
做 简单 的 了 解 。 


5. 长 度 单位 


CSS 中 的 单位 有 时 间 单 位 (如 s、ms) ， 还 有 和 角度 单位 (如 deg、 
rad 等 ) ， 但 最 常见 的 自然 还 是 长 度 单位 (如 px、em 等 ; 。 需 要 注意 
的 是 ， 诸 如 2% 后 面 的 百 分 号 % 不 是 长 度 单位 。 再 说 一 沉 ，% 不 是 长 度 单 
位 ! 因为 2% 就 是 一 个 完整 的 值 ， 就 是 一 个 整体 ， 我 想 你 一 定 认为 
0 .02 是 值 ， 没 错 ，2% 也 同样 是 值 。 


有 人 可 能 会 有 疑问 ， 我 就 认为 % 是 单位 ， 有 什么 关系 ， 页 面 还 是 
长 那样 ， 有 必要 这 么 较真 吗 ? 


问 的 很 在 理 ， 如 果 大 家 平时 没有 看 原始 文档 的 习惯 ， 没 必要 较 
真 ， 知 道 怎 么 使 用 就 好 了 。 但 是 ， 如 有 果 经 常 去 MDN 或 W3C 看 一 些 CSS 
技术 文档 ， 搞 清楚 概念 ， 看 文档 的 时 候 就 不 容易 犯 迷糊 ， 就 不 会 看 不 
懂 具 体 说 些 什 么 ， 尤 其 都 是 英文 的 时 候 。 


可 能 有 人 会 有 疑问 ,“ 值 ”那里 提 到 的 <length>， 貌 似 和 这 里 
的 “长 度 单 位 ”比较 暧昧 啊 ? 好 眼力 ! 没 错 ， 确 实 上 暧昧 ， 但 上 暧昧 古 不 好 
的 ， 我 们 必须 把 它们 之 间 的 关系 捅 清 楚 。 一 句 话 : 


如 采 继 续 细 分 ， 长 度 单 位 又 可 以 分 为 相对 长 度 单 位 和 绝对 长 度 单 


位 。 


(1) 相对 长 度 单位 。 相 对 长 度 单位 又 分 为 相对 字体 长 度 单位 和 相 
对 视 区 长 度 单位 。 


。 相对 字体 长 度 单位 ， 如 em 和 ex， 还 有 CSS3 新 世界 的 rem 和 ch 
(字符 0 的 宽度 ) 。 
。 相 对 视 区 长 度 单位 ， 如 vh、vw、vmin 和 vmax。 
(2) 绝对 长 度 单位 ， 最 常见 的 就 是 px， 还 有 pt、cm、mm、pc 等 
了 解 一 下 下 可 以 ， 在 我 看 来 ， 它 们 实用 性 近乎 零 ， 至 少 我 这 么 多 年 一 
次 都 没 用 过 。 
6. 功能 符 
值 以 函数 的 形式 指定 〈 束 是 被 括号 括 起 来 的 那 种 ) ， 主 要 用 来 表 
示 颜 色 (rgba 和 hsla) 、 背 景 图 片 地 址 (url) 、 元 素 属性 值 、 计 
算 (calc) 和 过 渡 效 果 等 ， 如 rgba(0,0,0,.5) 、url('css- 
world.png') 、attr('href' ) 和 scale(-1)。 
7. 属性 值 


属性 冒号 后 面 的 所 有 内 容 统一 称 为 属性 值 。 例 如 ，1px solid 
rgb(9, 9, 9 ) 融 可 以 称 为 属性 值 ， 它 是 由 “ 值 + 关键 字 + 功 能 符 ? 构 成 


的 。 属 性 值 也 可 以 由 单一 内 容 构成 。 例 如 ，z- index:1 的 1 也 是 属性 
值 。 


8. 声明 
属性 名 加 上 属性 值 就 是 声明 ， 例 如 : 
9. 声明 块 
声明 块 是 花 括 号 ({}) 包 焉 的 一 系列 声明 ， 例 如 : 


height: 99px; 
color: transparent; 


} 
10. 规则 或 规则 集 


出 现 了 选择 器 ， 而 且 后 面 还 跟着 声明 块 ， 比 如 本 小 节 一 开始 的 那 
个 例子 ， 就 古 一 个 规则 集 : 


.Vocabulary { 
height: 99px; 
color: transparent; 


} 
11. 选择 器 
选择 器 是 用 来 瞄准 目标 元 素 的 东西 ， 例 如 ， 上 面 


的 .vocabulary 束 是 一 个 选择 癸 。 


。 类 选择 侣 : 指 以 “.” 这 个 点 号 开头 的 选择 器 。 很 多 元 素 可 以 应 用 同 
一 个 类 选择 器。“ 类 ”， 天 生 束 是 被 公用 的 命 。 

ID 选择 需 : “#” 打 潜 ， 权 重 相当 高 。ID 一 般 指向 唯一 元 素 。 但 
是 ， 在 CSS 中 ，ID 样 式 出 现在 多 个 不 同 的 元 素 上 并 不 会 只 泻 染 第 
一 个 ， 而 是 雨露 均 沾 。 但 显然 不 推荐 这 么 做 。 

属性 选择 侣 : 指 舍 有 [的 选择 种 ， 形 如 [title]{J、[title= 
"css-world"]{}、 [title~="css-world"]{}.、 
[title^="css-world"]{} 和 [title$="css-world"]{} 
等 。 

伪 类 选择 器 : 一 般 指 前 面 有 个 黄 文 冒号 (:) 的 选择 器 ， 

如 :first-child 或 :last-child 等 。 

仿 元 素 选 择 侣 : 承 是 有 连续 两 个 冒号 的 选择 右 ， 如 : :first- 


line::first-letter、::before 和 : :after。 
12. 关系 选择 器 


关系 选择 器 是 指 根据 与 其 他 元 素 的 关系 选择 元 素 的 选择 器 ， 常 见 
的 符号 有 空格 、>、~， 还 有 + 等 ， 这 些 都 是 非常 常用 的 选择 器 。 


。 后 代 选 择 器 : 选择 所 有 合乎 规则 的 后 代 元 素 。 空 格 连接 。 

。 相 邻 后 代 选 择 器 : 仅仅 选择 合乎 规则 的 儿子 元 素 ， 孙 子 、 重 孙 元 
素 忽略 ， 因 此 又 称 “ 子 选择 锅 ”。> 连 接 。 适 用 于 IE7 以 上 版 本 。 
兄弟 选择 器 : 选择 当前 元 素 后 面 的 所 有 合乎 规则 的 兄弟 元 素 。-~ 
连接 。 适 用 于 IE7 以 上 版 本 。 

相 邻 兄弟 选择 器 : 仅仅 选择 当前 元 素 相 邻 的 那个 合乎 规则 的 兄弟 
元 素 。+ 连 接 。 适 用 于 下 7 以 上 版 本 。 


13. @ 规 则 


@ 规 则 指 的 是 以 @ 字 人 符 开始 的 一 些 规 则 ， 像 @media、@font- 
face、@page 或 者 Qsupport， 诸 如 此 类 。 


2.2 了解 CSS 世 界 中 的 “未 定义 行为 ” 


当 某 个 浏 顺 郁 中 出 现 与 其 他 浏览 万 不 一 样 的 行为 或 样式 表现 的 时 
候 ， 我 们 总 会 习惯 把 这 种 不 一 样 的 表现 认为 是 浏览 万 的 bpug。 但 在 CSS 
世界 ， 这 种 认识 是 狭隘 的 。 


在 现实 世界 中 ， 有 法 律 来 约束 我 们 的 行为 ， 如 果 越 界 ， 就 称 为 违 
法 ;同样 地 ， 在 CSS 世 界 里 ， 有 Web 标 准 来 约束 元 素 的 行为 ， 如 果 越 
界 ， 就 称 为 bug。 但 是 ， 法 律 总 是 人 制定 的 ， 世 间 万 象 是 不 可 能 面 面 俱 
到 的 ， 会 存在 法 律 空白 ， 同 样 地 ，Web 应 用 场景 千变万化 ，Web 标 准 
也 是 不 可 能 面面俱到 的 ， 也 会 存在 规范 描述 以 外 的 场景 ， 此 时 ， 各 大 
浏 蝎 怖 三 家 只 能 根据 目 己 的 理解 与 喜好 去 实现 ， 一 旦 个 性 化 束 会 出 现 
差异 ， 束 会 遇 到 “火狐 火狐 ， 你 怎么 啦 ? 平时 表现 挺 好 的 ， 今 天 怎么 被 
IE 带 坏 了 ? ”的 情景 。 实 际 上 ， 此 时 遇 到 的 表现 差异 并 不 是 浏 虎 器 的 
bug， 用 计算 机 领域 的 专业 术语 描述 应 该 是 “未 定义 行为 ”(undefined 


behavior) 。 


下 面 我 们 来 看 一 个 “未 定义 行为 ”的 例子 。 


CSS 世 界 中 有 很 多 伪 类 ， 其 中 一 个 比较 音 用 的 束 是 :active， 在 
IE8 及 以 上 版 本 的 浏览 器 行为 表现 非常 统一 ， 支 持 非 焦点 元 素 丰 ， 鼠 标 
按 下 ， 执 行 :active 伪 类 对 应 的 CSS 样 式 ， 鼠 标 抬 起 还 原 。 


通用 情况 下 ，:active 的 表现 都 是 符合 预期 的 ， 但 是 ， 当 遭遇 其 
他 一 些 处 理 的 时 候 ， 事 情 束 会 变 得 不 一 样 ， 具 体 指 什么 处 理 呢 ? 


假设 我 们 现在 有 一 个 <a> 标 签 模拟 的 按钮 ，CSS 如 下 : 
假设 此 按钮 的 DOM 对 象 变 量 名 为 button，JavaScript 代 码 如 下 : 


button.addEventListener("mousedown", function(event) { 
// 此 处 省 略 N 行 


event.preventDefault(); 


}); 


也 就 是 鼠标 按 下 的 时 候 ， 阻 止 按 钮 的 默认 行为 ， 这 样 设置 可 以 让 拖 动 
效果 更 流畅 。 


看 似 平淡 无 奇 的 一 段 代 码 ， 最 后 却 发 生 了 意 想 不 到 的 情况 : 
Firefox 浏 哆 如 的 :active 阵 亡 了 ， 妆 标 按 下 去 没有 UI 变化 ， 按 钮 背景 
没有 变 红 ! 其 他 所 有 浏 蜗 颖 ， 如 I 玉 和 Chrome 浏 览 嚣 ，:active 正 常 变 
红 ， 符 合 预 期 。 

眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/2/2-1.php 或 者 扫 下 面 


的 二 维 码 。 图 2-1 左 图 所 示 为 目标 效果 ， 右 图 所 示 是 Firefox 浏 蜗 絮 中 的 
人 


图 2-1 ”Firefox 浏 览 器 :active 的 作用 效果 


这 里 ，Firefox 和 IE/Chrome 浏 贤 絮 表现 不 一 样 ， 这 是 Firefox 浏 贤 屁 
的 bug 吗 ? 这 可 不 是 bug， 而 是 因为 规范 上 并 没有 对 这 种 场景 的 具体 拉 
述 ， 所 以 Firefox 认 为 :active 发 生 在 mousedown 事 件 之 后 ， 你 也 不 
能 说 它 什 么 ， 对 吧 ? 


像 这 种 规范 顾及 不 到 的 细 校 术 市 的 实现 ， 就 称 为 “未 定义 行为 ”。 


[相像 < a>、< button> 这 样 的 元 素 ， 当 我 们 使 用 键盘 进行 Tab 键 
切换 的 时 候 ， 是 可 以 被 focus 的 ， 表 现 为 虚 框 或 者 外 发 光 ， 这 类 元 素 
称 为 “焦点 元 素 ”";， 非 焦点 元 素 指 没有 设置 tabindex 属 性 的 < div>、 


< Span> 等 普通 元 素 。 在 IE6/IE7 浏 
对 :active 置 若 固 闻 。 


IT 和 
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第 3 章 ” 流 、 元 素 与 基本 尺寸 


第 1 章 提 过 了 ,“ 流 ”之 所 以 影响 了 整个 CSS 世 界 ， 就 是 因为 影响 了 
CSS 世 界 的 基石 HTML。 那 具体 是 如 何 影 响 的 呢 ? 


HTML 常见 的 标签 有 <div>、<p>、<1i> 和 <tab1le> 以 及 
<Span>、<img>、 和 <em> 等 。 虽 然 标签 种 类 党 多 ， 但 通 单 我们 残 把 
它们 分 为 两 类 : 块 级 元 素 (block-level element) 和 内 联 元 素 (inline 


element) 


注意 ， 如 果 按 照 W3C 的 CSS 规 范 区 分 ， 这 里 应 该 分 为 “ 块 级 元 

素 ” 和 “内 联 级 元 素 ” (inline-level element) 。 但 是 ， 在 W3C 的 HTML4 
规范 中 ， 已 经 明确 把 HTML 元 素 分 成 了 "“ 抉 级 元 素 ” 和 “内 联 元 素 "， 没 
错 ， 是 “内 联 元 素 ” 而 不 是 “内 联 级 元 素 *”。 两 个 规范 貌似 有 人 微小 的 冲突 。 
本 书 中 所 采用 的 是 “内 联 元 素 ” 这 种 称谓 ， 原 因 有 两 点 : 第 一 ， 这 种 称 
谓 更 亲切 、 更 目 然 ,因为 大 家 平时 都 是 这 么 叫 的 ;第 二 ， 使 用 “内 联 元 
素 ” 这 个 称谓 对 我 们 深入 理解 与 内 联 相 关 的 概念 并 没有 什么 影响 。 考 虑 
到 本 书 的 目的 不 是 为 CSS 规 范 做 科普 ， 而 是 以 通俗 易 懂 方式 展示 CSS 的 
精彩 世界 ， 所 以 ， 采 用 了 更 老 一 点 的 HTML 规 攻 中 的 叫 法 。 


3.1 ” 块 级 元 素 


“ 抉 级 元 素 ? 对 应 的 英文 是 block-level element， 和 常见 的 块 级 元 素 有 
<div>、<1i> 和 <tab1e> 等 。 需 要 注意 是 ,“ 抉 级 元 素 " 和 “display 


为 block 的 元 素 ” 不 是 一 个 概念 。 例 如 ，<14i> 元 素 默 认 的 display 值 是 
list-item，<table> 元 素 默 认 的 display 值 是 table， 但 是 它们 均 
是 “ 抉 级 元 素 ”*"， 因 为 它们 都 符合 块 级 元 素 的 基本 特征 ， 也 就 是 一 个 水 

平流 上 只 能 单独 显示 一 个 元 素 ， 多 个 块 级 元 素 则 换行 显示 。 


正 是 由 于 “ 块 级 元 素 " 具 有 换行 特性 ， 因 此 理论 上 它 部 可 以 配合 
clear 属 性 来 清除 浮动 市 来 的 影响 。 例 如 : 


,Clear:after { 
content: ''; 
display: table; // 也 可 以 是 plock， 或 者 是 list-item 
clear: both; 


} 


手动 输入 http://demo.cssworld.cn/3/1-1.php 或 者 扫 右 侧 的 二 维 码 。 


从 容器 的 背景 色 高 度 变化 我 们 可 以 看 出 清除 的 效果 ， 如 图 3-1 所 
示 “。 


a 


请 选择 清除 浮动 的 方法 : 


请 选择 清除 浮动 的 方法 : 


.Clear:after { 


i .Clear:after { 
content : 


content: "" 


display: | 请 选择 "|; 
splay: | 请 选择 display: |table "|; 


1 : both 
clear: bo clear: both; 


图 3-1 容器 的 背景 色 高 度 变化 的 效果 


实际 开发 时 ， 我 们 要 么 使 用 block， 要 么 使 用 tab1le， 并 不 会 使 
用 1ist-item， 主 要 有 3 个 原因 。 


(1) 1 个 字符 的 比较 多 ， 其 他 都 是 5 个 字符 。 


(2) 会 出 现 不 需要 的 项 目 符号 ， 如 图 3-2 箭 头 所 示 。 这 其 实 并 不 是 
什么 大 问题 ， 再 加 一 行 ]ist-style:none 声 明 就 可 以 了 。 


(3) 正 浏 览 器 不 支持 伪 元 素 的 display 值 为 1ist-item。 这 是 
不 使 用 display:1list-item 清 除 浮动 的 主因 ， 兼 容 性 不 好 。 对 于 IE 
浏览 器 (包括 IE11) ， 普 通 元 素 设置 dijsplay:1list-item 有 效 , 但 
是 :before/:after 伪 元 素 就 不 行 。 


Wg 


请 选择 清除 浮动 的 方法 : 


.Clear:after { 
content: "' 


display: [Tist-ten | 


clear: both; 


图 3-2 ”出 现 项 目 符号 


下 面 是 提问 环节 了 。 请 问 ， 为 什么 还 浏 唤 器 不 支持 伪 元 素 的 
display 值 为 list-item 呢 ? 


其 实 这 个 问题 的 答案 可 以 从 下 面 这 个 问题 中 找到 线索 : 请 问 ， 为 
什么 设置 display:1ist-item， 元 素 会 出 现 项 目 符号 ? 


3.1.1 为 什么 list -item 元 素 会 出 现 项 目 符 号 


在 CSS 世 界 中 ， 很 多 看 似 “ 理 所 当然 ”的 现象 的 背后 ， 实 际 上 可 能 有 
一 整套 的 体系 支撑 。 控 扬 简 单 现象 背后 的 原因 ， 会 让 你 学 到 很 多 别人 
很 难 学 到 的 CSS 技 能 和 知识 。 


回 到 这 个 问题 。 此 问题 本 映 并 不 难 ， 但是， 问题 所 能 延伸 出 来 的 
东西 加 要 吓 到 诸位 了 。 此 问题 牵扯 到 CSS 世 界 中 各 种 盒子 。 


由 于 牵扯 名 词 甚 多 ， 所 以 我 尽量 以 通俗 易 懂 的 方式 给 大 家 解释 。 


创造 CSS 的 造物 主 原本 的 想法 很 商 单 : 我 要 创造 一 个 世界 ， 吏 像 只 
有 男性 和 女性 一 样 ， 这 个 世界 只 有 块 级 盒子 (block-level box) 和 内 联 
盒子 (inline box) 。 块 级 盒子 就 负责 结构 ， 内 联 盒子 就 负责 内 容 。 事 
非 经 过 不 知 难 ， 造 物 主 后 来 才 发 现 ， 这 世界 不 止 有 男性 和 女性 ， 还 有 
等 殊 的 性 别 ，CSS 世 界 的 盒子 也 是 这 样 。 


原本 以 为 块 级 盒子 一 父 束 够 用 了 ， 也 了 束 是 所 有 ”" 抉 级 元 素 " 束 只 有 
一 个 “ 块 级 盒子 *"， 但 是 ， 半 路 杀 出 个 list -Item， 其 默认 要 显示 项 目 
符号 的 ， 一 个 盒子 解释 不 了 ， 怎 么 办 ? 


束 跟 我 们 写 JavaScript 组 件 过 到 新 功能 增加 API 一 样 ， 天 神灵 机 一 
动 : 我 给 List-item 再 重新 命名 一 个 盒子 ， 束 叫 “ 附 加 盒子 ”。 好 了 ， 
这 下 顺 了 ， 所 有 的 “ 块 级 元 素 ” 都 有 一 个 “ 主 块 级 盒 于 ，1ist -item 除 
此 之 外 还 有 一 个 “附加 盒子 ”。 


现在 大 家 知道 上 面 问题 的 答案 了 吧 ! 之 所 以 list -item 元 素 会 出 
现 项 目 符 号 是 因为 生成 了 一 个 附加 的 盒子 ， 学 名 “标记 盒子 ” (marker 
box) ， 专 门 用 来 放 圆 点 、 数 字 这 些 项 目 符号 。 下 浏览 器 下 伪 元 素 不 文 
持 ]ist-item 或 许 就 是 无 法 创建 这 个 “标记 盒子 ”导致 的 。 


但 征 ， 我 们 的 故事 还 没 结束 。 搞 定 了 1ist-item， 天 神 本 以 为 可 
以 安安 心心 睡 个 午觉 ， 结 果 碰 到 了 真正 的 特殊 性 别 的 


display:inline-block 元 素 。 


罕 着 inline 的 皮 藏 着 block 的 心 ， 现 有 的 儿 个 盒子 根本 没 法 解释 
啊 ， 怎 么 办 ? 


造物 主 再 次 灵机 一 动 ， 没 错 ， 你 猜 对 了 ， 又 新 增 一 个 金子 ， 也 就 
是 每 个 元 素 都 两 个 盒子 ， 外 在 盒子 0 和 内 在 盒子 。 外 在 盒子 负责 元 素 是 
可 以 一 行 显示 ， 还 是 只 能 换行 显示 ， 内 在 盒子 负责 宽 高 、 内 容 虽 现 什 
么 的 。 但 是 呢 ， 造 物 主 又 想 了 想 ， 叫 “内 在 盒子 "虽然 容易 理解 ， 但 是 
未 免 有 些 俗气 ， 难 登 大 雅之 堂 ， 于 是 ， 又 想 了 一 个 更 专业 的 名 称 ， 叫 
作 “ 容 器 盒子 ”。 


于 是 ， 按 照 display 的 属性 值 不 同 ， 值 为 block 的 元 素 的 盒 于 实 
际 由 外 在 的 “ 块 级 盒子 ”和 内 在 的 “ 块 级 容 右 盒子 ”组 成 ， 值 为 jnline- 
block 的 元 系 则 由 外 在 的 “内 联 盒子 ?和 内 在 的 * 块 级 容 融 盒子” 组 成 ， 值 
为 in1ine 的 元 聚 则 内 外 均 是 “内 联 盒子 ”。 


现在 ， 大 家 应 该 明白 为 何 dijsplay 属 性 值 是 ijnline-block 的 元 
素 既 能 和 图 文 一 行 显示 ， 又 能 直接 设置 width/height 了 吧 ! 因为 有 两 
个 盒子 ， 外 面 的 盒子 是 in1ine 级 别 ， 里 面 的 盒子 是 block 级 别 。 


实际 上 ， 如 果 遵 循 这 种 理解 ，display :block 应 该 脑 补 成 
display:block-block，display:table 应 该 脑 补 成 
display:block-table， 我 们 平时 的 写法 实际 上 有 是 一 种 简写 。 


好 了 ， 说 了 这 么 多 ， 出 个 小 题 测试 一 下 大 家 的 学 习 成 果 。 请 问 : 
display:inline-table 的 盒子 是 怎样 组 成 的 ? 


3.1.2 display:inline-table 的 盒子 是 怎样 组 成 的 


这 个 问题 应 该 无 压力 : 外 面 是 “内 联 盒子 ”， 里 面 是 “table 盒 子 ”。 人 得 
到 的 惑 是 一 个 可 以 和 文字 在 一 行 中 显示 的 表格 。 


可 以 和 文字 在 一 行 中 显示 的 表格 ? 没 错 ， 为 了 证 明 我 没 名 悠 大 
家 ， 我 特意 做 了 个 演示 页 面 ， 演 示 页 面 中 <div> 元 素 的 相关 CSS 代 码 如 
下 : 


.inline-table { 
display: inline-table; 
width: 128px; 


margin-left: 10px; 
border: 1px solid #cad5eb 


} 


手动 输入 http://demo.cssworld.cn/3/1-2.php 或 者 扫 下 面 的 二 维 码 。 结 
果 该 元 素 和 文字 一 行 显示 ， 且 行为 表现 如 同 真 正 的 表格 元 素 ( 子 元 素 
宽度 等 分 | ， 如 图 3-3 所 示 。 


和 文字 平起平坐 的 去 格 : IE 


图 3-3 ”表格 元 素 和 文字 在 一 行 显示 


上 面 示意 的 CSS 代 码 表面 上 看 起 来 很 简单 ， 但 是 ， 我 也 说 过 ， 人 简单 
的 背后 往往 是 不 简单 。 这 里 CSS 中 有 个 width :128px， 从 最 终 的 效果 
来 看 ， 宽 度 设 置 是 起 作用 了 “。 如 果 我 们 使 用 display:inline- 
block 也 会 是 同样 的 宽度 表现 。 下 面 问题 来 了 : 元 素 都 有 内 外 两 个 盒 
子 ， 我 们 平常 设置 的 width/height 属 性 是 作用 在 哪个 盒子 上 的 ? 


3.1.3 ” width/height 作 用 在 哪个 盒子 上 


这 个 问题 也 是 很 简单 的 ， 因 为 在 解释 内 外 盒子 的 时 候 就 已 经 提 到 
过 了 : 是 内 在 盒子 ， 也 就 是 “容器 盒子 ”。 


不 知 大 家 有 没有 进一步 深入 思考 过 : width 或 height 作 用 的 具体 
细 攻 是 什么 呢 ? 
3.2 width/height 作 用 的 具体 细节 

因为 块 级 元 素 的 流体 特性 主要 体现 在 水 平方 向 上 ， 所 以 我 们 这 里 
先 着 重 讨论 width。 


估计 很 多 人 的 第 一 次 CSS 属 性 书写 职 献 给 了 width， 就 像 路 边 的 小 
草 ， 好 和 常见、 好 平淡 、 好 简单 的 样子 。 如 果 你 有 这 样 的 想法 ， 此 书 你 
就 买 对 了 。 
3.2.1 ，” 深 藏 不 露 的 width :auto 


我 们 应 该 都 知道 ，width 的 默认 值 是 auto。auto 因 为 是 默认 值 ， 
所 以 出 镜 率 不 高 ， 但 是 ， 它 却 是 个 深 藏 不 露 的 家 伙 ， 它 至 少 包含 了 以 


F4 种 不 同 的 宽度 表现 。 


(1) 充分 利用 可 用 空间 。 比 方 说 ，<div>、<p> 这 些 元 素 的 宽度 
默认 是 100% 于 父 级 容器 的 。 这 种 充分 利用 可 用 空间 的 行为 还 有 个 专 有 
名 字 ， 叫 作 fil1l1-available， 大 家 了 解 即 可 。 


(2) 收缩 与 包 庄 。 上 典型 代表 就 是 浮动 、 绝 对 定位 、inline- 
block 元 素 或 table 元 素 ， 英 文 称 为 shrink-to-fit， 直 译 为 “收缩 到 合 
适 ”， 有 那么 点 儿 意 思 ， 但 不 够 形象 ， 我 一 直 把 这 种 现象 称 为 “ 包 豆 
性 ”。CSS3 中 的 fit-content 指 的 就 是 这 种 宽度 表现 。 


(3) 收缩 到 最 小 。 这 个 最 容易 出 现在 table-layout 为 auto 的 
表格 中 ， 想 必 有 经 验 的 人 一 定 见 过 图 3-4 所 示 的 这 样 一 柱 敬 天 的 盛况 
吧 | 


眼见 为 实 ， 有 兴趣 的 读者 可 以 手动 输入 http:/demo.cssworld.cn/3/2- 
1.php 或 者 扫 下 面 的 二 维 码 。 


当 父 级 relative , 且 | 当 父 级 relative , 且 
宽度 很 小 的 时 候 ，, 例 | 帘 度 很 小 的 时 候 ， 例 


如 如 
{position:relative; {position:relative:; 
width:20px;} ， width:20px:} ， 
absolute 元 素 也 会 absolute 元 素 也 会 
出 现 一 柱 擎 天 的 情 | 出 现 一 柱 擎 天 的 情 


居于 漠 济济 六 中 时 关中 潮 


| | 
4 


图 3-4 ”单元 格 中 的 一 柱 擎 天 效果 


一 列 空间 都 不 够 的 时 候 ， 文 字 能 断 就 断 ， 但 中 文 是 随便 断 
的 ， se 第 一 列 被 无 情 地 每 个 字 都 断 掉 ， 形 成 一 
柱 擎 天 。 这 种 行为 在 规范 中 被 摘 述 为 "preferred minimum width” 或 
者 “minimum content width”。 后 来 还 有 了 一 个 更 加 好 听 的 名 字 min- 


Content。 


(4) 超出 容器 限制 。 除 非 有 明确 的 width 相关 设置 ， 否 则 上 面 3 
种 情况 尺寸 都 不 会 主动 超过 父 级 容器 宽度 的 ， 但 是 存在 一 些 特 殊 情 
况 。 例 如 ， 内 容 很 长 的 连续 的 英文 和 数字 ， 或 者 内 联 元 素 被 设置 了 
white-space:nowrap， 则 表现 为 “恰似 一 江 春 水 辐 东 流 ， 流 到 断崖 
也 不 回头 ”。 


例如 ， 看 一 下 下 面 的 CSS 代 码 ; 


father { 
width: 150px; 
background-color: #cd0000; 
white-space: nowrap; 


.child { 


display: inline-block; 
background-color: #fQOf3f9; 


这 段 代码 的 结果 如 图 3-5 所 示 。 


怡 如 一 江 春 水 向 东 流 ， 流 到 断崖 也 不 回头 


图 3-5 ”文字 超出 容器 也 不 换行 示意 


子 元 素 既 保持 了 inline-block 元 素 的 收缩 特性 ， 又 同时 让 内 容 
宽度 最 大 ， 直 接 无 视 父 级 容器 的 宽度 限制 。 这 种 现象 后 来 有 了 专门 的 
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属性 值 描述 ， 这 个 属性 值 叫 作 max-content， 这 个 属于 CSS3 新 世界 内 
容 ， 本 书 点 到 为 止 ， 不 深究 


眼见 为 实 ， 


若 有 兴趣 ， 可 以 手动 输入 http://demo.cssworld.cn/3/2- 
2.php 或 扫 右 侧 的 二 维 码 亲自 感受 一 下 。 


上 面 列举 的 4 点 就 是 width :auto 在 不 同 场景 下 的 宽度 表现 的 简 


在 CSS 世 界 中 ， 盒 子 分 “内 在 盒子 ?和 * 外 在 盒子 *”， 显 示 也 分 “内 部 
显示 ”和 “外 部 显示 ”， 同 样 地 ， 尺 寸 也 分 “内 部 尺寸 "和 “外 部 尺寸 ”。 其 
中 “内 部 尺寸 "英文 写作 “Intrinsic Sizing”， 表 示 尺 寸 由 内 部 元 素 决定 ; 
还 有 一 类 叫 作 * 外 部 尺寸 "， 英 文 写作 “Extrinsic Sizing”， 宽 度 由 外 部 元 
素 决 定 。 现 在 ， 考 考 大 家 : 上 面 4 种 尺寸 表现 ， 哪 个 是 “外 部 尺寸 ”? 哪 
个 是 “内 部 尺寸 ”? 


这 里 就 不 卖 关 了 于 了 “。 婚 第 一 个 ， 也 就 是 <div> 默 认 宽度 100% 显 
示 ， 是 “外 部 尺寸 "， 其 余 全 部 是 “内 部 尺寸 *。 而 这 唯一 的 “外 部 尺寸 ”， 
古 “ 流 ”的 精 肯 所 在 。 


1. 外 部 尺寸 与 流体 特性 


(1) 正常 流 宽度 。 当 我 们 在 一 个 容器 里 倒 入 足 量 的 水 时 ， 水 一 定 
会 均匀 铺 满 整个 容 右 ， 如 图 3-6 所 示 。 


水 流 会 目 动 铺 满 容器 


本 
| 


图 3-6 水流 目 动 铺 满 容器 示意 


在 页 面 中 随便 扔 一 个 <div> 元 素 ， 其 矿 二 表现 融会 和 这 水 流 一 样 
铺 满 容 姑 。 这 束 是 block 容 需 的 流 特性 。 这 种 特性 ， 所 有 浏览 禹 的 表 


现 者 一 致 的 。 因 此 ， 我 惑 实在 想 不 通 ， 为 何 那 么 多 网 站 或 同行 会 有 
类 似 下 面 的 CSS 写 法 。 例 如 ， 一 个 垂直 导航 : 


at 
display: block; 


width: 100%; 


} 


<a> 元 素 默 认 diplay 是 ijnline， 所 以 ,设置 display:block 使 
其 块 状 化 绝对 没有 问题 ， 但 后 面 的 width:100% 就 没有 任何 出 现 的 必 
要 了 。 


我 很 多 年 前 总 结 过 一 套 “ 舍 三 无 准则 ”， 即 “无 宽度 ， 无 图 片 ， 无 浮 
动 ”。 为 何 要 “无 视 度 ”? 原因 很 简单 ， 表 现 为 “外 部 扩 寸 "的 块 级 元 素 一 
旦 设置 了 宽度 ， 流 动 性 就 丢失 了 。 


所 谓 流 动 性 ， 并 不 是 看 上 去 的 宽度 100% 显 示 这 么 简单 ， 而 是 一 种 
margin/border/padding 和 content 内 容 区 域 自动 分 配水 平 空间 的 
机 制 。 


我 们 来 看 一 个 简单 的 例子 ， 手 动 输入 http://demo.cssworld.cn/3/2- 
3.php 或 者 扫 右 侧 的 二 维 码 。 这 是 一 个 对 比 演示 ( 见 图 3-7) ， 上 下 两 个 
导航 均 有 margin 和 padding， 前 者 无 width 设 置 ， 完 全 借助 流 特性 ， 
后 者 宽度 width:100%。 结 有 果 ， 后 者 的 尺寸 超出 了 外 部 的 容器 ， 完 全 
残 不 像 " 水 流 ?” 那 样 完全 利用 容器 空间 ， 即 所 谓 的 “流动 性 丢失 ”。 


无 宽度 ， 借 助 流动 性 


width:100% 尺寸 超出 


图 3-7 ” 设 定 宽度 与 流动 性 缺失 


当然 ， 实 际 开发 的 上 时候， 是 不 会 设置 宽度 100% 的 ， 毕 竞 有 显示 问 
题 。 此 时 ， 可 能 有 人 会 突然 灵光 一 现 ， 借 助 流动 性 来 实现 ..….... 要 是 这 
样 就 好 了 ， 然 而 其 基本 上 采取 的 策略 是 ， 发 挥 自己 天 才 般 的 计算 能 
力 ， 通 过 “容器 宽度 -水 平 padding- 水 平 nargin=?” 重 新 设 定 具 体 的 


宽度 。 


于 是 ， 最 终 的 CSS 代 码 如 下 : 


‘Nav { 
width: 240px; 


‘Nav-a { 
display: block; 
/* 200px = 240px - 10px*2 - 10px*2 */ 


width: 200px; 
margin: © 10px; 
padding: 9px 10px; 


典型 的 “ 砌 砖头 ”“ 搭 积 木 ” 式 思维 方式 ! 虽然 况 最 后 的 效果 是 一 样 
的 ， 但 是 ， 如 有 果 模 块 的 宽度 变化 了 ， 哪 人 只 变 了 1 像素 ，width 也 需要 
重新 计算 一 志 。 但 是 ， 如 果 借 助 流动 性 无 视 度 布局 ， 那 么 束 算 外 面容 
和 亏 矿 寸 要 化 ， 我 们 的 导航 也 可 以 目 适应 ， 这 吏 是 充分 利用 训 斋 郁 原生 
流 特性 的 好 处 。 


因此 ， 记 住 “ 无 宽度 "这 条 准则 ， 少 了 代码 ， 少 了 计算 ， 少 了 维 
护 ， 何 乐 而 不 为 呢 ? 


你 应 该 还 记得 前 面 说 过 display :block 应 该 脑 补 成 
display:block-block， 这 十 我 日 己 想 出 来 的 ， 便 于 大 家 理解 ， 
CSS 世 界 其 实 并 没有 这 样 的 说 法 。 虽 有 “ 脐 想 ”成 分 在 里 面 ， 但 其 实 也 是 
有 理 可 循 的 。 本 节 详 细 讲 了 块 级 元 素 的 流体 特性 ， 这 种 特性 就 是 体现 
在 里 面 的 “容器 盒子 "上 的 。 所 以 ， 在 CSS3 最 新 的 世界 中 ，CSS 规 范 的 
撰写 者 们 使 用 了 另外 一 个 名 词 来 表示 这 个 内 在 盒子 ， 就 是 “flow”， 也 就 
是 本 书 的 核心 “ 流 ”。 因 此 ，display :block 更 规范 的 脑 补 应 该 是 
display:block flow。 注意 中 间 是 空格 。 当 然 ， 由 于 规范 (草案 ) 
2015 年 10 月 才 发 布 ， 因 此 直到 2017 年 6 月 为 止 还 没有 浏览 器 支持 。 好 
了 ， 这 属于 比 CSS3 新 世界 还 要 新 的 世界 的 知识 点 ， 了 解 即 可 。 


(2) 格式 化 宽度 。 格 式 化 宽度 仅 出 现在 “绝对 定位 模型 ”中 ， 也 就 
是 出 现在 position 属 性 值 为 absoLute 或 fixed 的 元 素 中 。 在 默认 情 
况 下 ， 绝 对 定位 元 素 的 宽度 表现 是 “ 包 误 性”"， 宽 度 由 内 部 尺寸 决定 ， 
但 是 ， 有 一 种 情况 其 宽度 是 由 外 部 尺寸 决定 的 ， 是 什么 情况 呢 ? 


对 于 非 替 换 元 素 ( 见 本 书 第 4 章 ) ， 当 left/top 或 top/bottom 
对 立方 位 的 属性 值 同 时 存在 的 时 候 ， 元 素 的 宽度 表现 为 “格式 化 宽 
度 ”， 其 宽度 大 小 相对 于 最 近 的 具有 定位 特性 (position 属 性 值 不 是 
static) 的 祖先 元 素 计算 。 


例如 ， 下 面 一 段 CSS 代 码 : 


div { position: absolute; left: 20px; right: 20px; } 


假设 该 <div> 元 素 最 近 的 具有 定位 特性 的 祖先 元 素 的 宽度 是 1000 像 
素 ， 则 这 个 <div> 元 素 的 宽度 是 960 〈 即 1000-20-20) 像素 。 


此 外 ， 和 上 面 的 普通 流 一 样 , “格式 化 宽度 ”具有 完全 的 流体 性 ， 
也 就 是 margin、border、 padding 和 content 内 容 区 域 同 样 会 自动 
分 配水 平 《和 垂直 ) 空间 。 

“格式 化 宽度 ”水 很 深 同时 也 非常 实用 ， 这 里 先 简 单 提 及 ， 更 多 
内 容 可 参见 本 书 第 6 章 与 position:absolute 相 关 的 内 容 。 


2. 内 部 尺寸 与 流体 特性 


上 一 节 讲 的 是 “外 部 尺寸 *， 本 节 就 讲 讲 “ 内 部 尺寸 *。 所谓“ 内 部 尺 
寸 *， 简 单 来 讲 就 是 元 素 的 尺寸 由 内 部 的 元 素 决定 ， 而 非 由 外 部 的 容器 


决定 。 如 何 快速 判断 一 个 元 素 使 用 的 是 否 为 “内 部 尺寸 " 呢 ? 很 简单 ， 
假如 这 个 元 素 里 面 没有 内 容 ， 宽 度 束 是 9， 那 就 是 应 用 的 “内 部 尺寸 ”。 


据 我 所 知 ， 在 CSS 世 界 中 ，“ 内 部 尺寸 "有 下 面 3 种 表现 形式 。 
(1) 包 庄 性 。 


“ 包 庄 性 ?是 我 目 己 对 “shrink-to-fit” 理 解 后 的 一 种 称谓 ， 我 个 人 觉得 
非常 形象 好 记 ， 一 直 用 了 很 多 年 。“ 包 于 性 ”也 是 CSS 世 界 中 很 重要 的 流 
布局 表现 形式 。 


中 文 吏 ee 顾名思义 ,“ 包 囊 性 ”， 除 了 “ 包 囊 "”， 还 有 “ 目 
适应 性 性 ”是 区 分 后 面 两 种 尺寸 表现 很 重要 的 一 点 。 那 么 这 
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所 谓 “ 自 适应 性 *"， 指 的 是 元 素 尺寸 由 内 部 元 素 决 定 ， 但 永远 小 
于 “包含 块 " 容 器 的 尺寸 Od 首选 最 小 宽度 ”) 。 
换 句 话说 就 是 , “ 包 囊 性 元素 责 冥 中 有 个 max-width:100% 晶 着 的 感 
觉 (注意 ， 此 说 法 只 是 便于 大 家 理解 ， 实 际 上 是 有 明显 区 别 的 ) 。 


因此 ， 对 于 一 个 元 素 ， 如 采 其 displLay 属 性 值 是 inLine- 
block， 那 么 即使 其 里 面 内 容 再 多 ， 只 要 是 正常 文本 ， 宽 度 也 不 会 超 
过 容器 。 于 是 ， 图 文 混 排 的 时 候 ， 我 们 只 要 关心 内 容 ， 除 非 “ 首 选 最 小 
宽度 ” 比 容器 宽度 还 要 大 ， 和 否则 我 们 完全 不 需要 担心 某 个 元 素 内 容 太 多 
而 破坏 了 布局 。 


凡事 发 生 必 有 缘由 。CSS 世 界 的 造物 主 为 何 要 设计 “ 包 右 性 ”这 个 东 
西 呢 ? 是 为 谁 设计 的 呢 ? 


反问 是 探究 知识 的 很 好 的 习惯 和 方式 。 要 回答 上 面 的 问题 ， 我 们 
只 要 请 一 个 嘉宾 出 来 ， 答 案 就 基本 差不多 了 “。 下 面 我 们 就 请 出 重量 级 
嘉宾 一 一 著名 的 “按钮 "元素 。 没 错 ， 就 是 黑 认 长 得 比较 丑 ， 样 式 定 义 
兼容 性 又 不 好 的 按钮 元 聚 。 


按钮 通 币 以 如 下 两 种 形式 出 现在 页 面 代码 中 : 


<button> 按 钮 </button> 


<input type="button" value=" 按 钮 "> 


按钮 就 是 CSS 世 界 中 极 具 代表 性 的 jnline-block 元 素 ， 可 谓 展 
示 “ 包 于 性 ”最 好 的 例子 ， 具 体 表现 为 ， 按 钮 文字 越 多 宽度 越 宽 (内 部 
尺寸 特性 ) ， 但 如 果 文 字 足 够 多 ， 则 会 在 容器 的 宽度 处 自动 换行 ( 自 
适应 特性 ) 。 


按钮 会 自动 换行 ? 没 错 ， 你 之 所 以 没 印象 ， 可 能 是 因为 : 

。 实际 项 目 中 ， 按 钮 上 的 文字 个 数 比 较 有 限 ， 没 机 会 换行 ; 

。 <button> 标 签 按钮 才 会 自动 换行 ，<input> 标 签 按钮 ， 默 认 
white-space:pre， 是 不 会 换行 的 ， 需 要 将 pre 值 重 置 为 默认 的 


normal 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-4.php 或 者 扫 下 面 的 
二 维 码 。 上 面 的 示例 页 面 的 效果 如 图 3-8 所 示 。 


文字 再 多 一 点 


按钮 文字 越 多 宽度 越 宽 ( 包 圳 ,内 部 尺寸 
特性 ) ， 但 不 会 起 过 容器 宽度 ( 自 适应 
性 ) 


图 3-8 ”IE11 浏 览 器 IE8 模 式 下 按钮 换行 效果 


按钮 最 大 宽度 就 是 容器 的 240 像 素 ，1 像 素 不 多 1 像素 不 少 ， 顿 时 有 
了 一 种 内 外 兼 修 的 感觉 。 


“ 包 右 性 ?对 实际 开发 有 什么 作用 啤 ? 


请 看 这 个 需求 : 页 面 某 个 模块 的 文字 内 容 是 动态 的 ， 可 能 是 几 个 
字 ， 也 可 能 是 一 句 话 。 然 后 ， 希 望 文字 少 的 时 候 居中 显示 ， 文 字 超 过 
一 行 的 时 候 居 左 显示 。 该 如 何 实现 ? 


核心 CSS 代 码 如 下 : 


.box { 
text-align: center; 


.Ccontent { 


display: inline-block; 
text-align: left; 


} 


这 样 ， 文 字 少 的 时 候 ， 就 会 如 图 3-9 所 示 。 文 字 多 的 上 时候， 如 图 3- 
10 所 示 。 


图 3-9 ”文字 少时 的 显示 效果 


文字 内 容 - 新 增 文字 -新 增 文字 -新 增 


文字 -新 增 文 字 


图 3-10 ”文字 多 时 的 显示 效果 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-5.php 或 者 扫 右 侧 的 
二 维 码 ， 进 入 页 面 点 击 “ 更 多 文字 ”按钮 体验 。 


除了 inline-block 元 素 ， 浮 动 元 素 以 及 绝对 定位 元 素 都 具有 包 
庄 性 ， 均 有 类 似 的 智能 宽度 行为 。 


(2) 首选 最 小 宽度 。 


所 谓 “ 首 选 最 小 宽度 "”， 指 的 是 元 素 最 适合 的 最 小 宽度 。 我 们 接着 
上 面 的 例子 ， 在 上 面 例子 中 ， 外 部 容器 的 宽度 是 240 像 素 ， 假 设 宽度 是 
0， 请 问 里 面 的 jnline-block 元 素 的 宽度 是 多 少 ? 


是 0 吗 ? 不 是 。 在 CSS 世 界 中 ， 图 片 和 文字 的 权重 要 远大 于 布局 ， 
因此 ，CSS 的 设计 者 显然 是 不 会 让 图 文 在 width :auto 时 宽度 变 成 0 
的 ， 此 时 所 表现 的 宽度 就 是 “首选 最 小 宽度 ”。 上 有 具体 表现 规则 如 下 。 


。 东亚 文字 〈 如 中 文 ) 最 小 宽度 为 每 个 汉字 的 宽度 ， 如 图 3-11 所 示 的 
14° 


图 3-11 ”中 文 汉字 与 最 小 宽度 效果 


nt | 92.78x40 


display:inline- 


。 西方 文字 最 小 宽度 由 特定 的 连续 的 英文 字符 单元 决定 。 并 不 是 所 
有 的 英文 字符 都 会 组 成 连续 单元 ， 一 般 会 终止 于 空格 (普通 空 
格 ) 、 短 横 线 、 问 号 以 及 其 他 非 英 文字 符 等 。 例 
如 ,，“display:inline-block” 这 几 个 字符 以 连接 符 “-” 作 为 分 
阳 符 ， 形 成 了 “display :inline” 和 “block” 两 个 连续 单元 ， 由 
于 连接 符 “-” 分 隔 位 置 在 字符 后 面 ， 因 此 ， 最 后 的 宽度 就 
是 “display :inline-” 的 宽度 ， 如 图 3-12 所 示 。 


如 果 想 让 英文 字符 和 中 文 一 样 ， 每 一 个 字符 都 用 最 小 宽度 单元 ， 
可 以 试 试 使 用 CSS 中 的 word-break:break-al1。 


。 类 似 图 片 这 样 的 奉 换 元 素 的 最 小 宽度 就 是 该 元 素 内 容 本 身 的 宽 
度 。 


“首选 最 小 宽度 ?对 我 们 实际 开发 有 什么 作用 呢 ? 


可 以 让 我 们 遇 到 类 似 现 象 的 时 候 知 道 原 因 是 什么 ， 方 便 迅 速 对 证 


下 药 ， 其 他 吏 没 什么 用 了 。 


有 点 失望 ? 那 好 ， 我 就 举 个 利用 “首选 最 小 宽度 ”构建 图 形 的 例子 
吧 。 请 问 ， 如 何 使 用 一 层 HTML 标 签 分 别 实现 图 3-13 所 示 
的 “四 ”和 “ 凸 ” 效 果 (注意 要 兼容 IE8) ? 


由 于 要 兼容 IE8，CSS 新 世界 中 图 形 构建 利器 的 盒 阴 影 和 背景 渐变 
全 都 没有 用 武之 地 ， 怎 么 办 呢 ? 我 们 可 以 利用 “首选 最 小 宽度 ”的 行为 
特点 把 需要 的 图 形 勾勒 出 来 。 核 心 CSS 代 码 如 下 〈 以 “ 凹 ?效果 示意 ) : 


.a0 { 
display: inline-block; 
width: 09; 


,ao:before { 


content: "love 你 love"; 
outline: 2px solid #cd0000 ; 
color: #fff; 


还 没 看 明日 ? 那 我 把 文字 颜色 放出 来 ( 见 图 3-14) ， 大 家 应 该 就 知 


道 实现 原理 了 。 


Ed 


图 3-13 需 3 


实现 的 效 呈 


人 


图 


图 3-14 ”图 形 由 文字 区 域 勾 勒 而 成 


利用 连续 英文 单词 不 换行 的 特性， 我 们 就 可 以 控制 什么 地 
方 < 问 ”， 付 各 地 方 “ 丫 "了 略 ! 


想 看 在 线 演示 ， 请 手动 输入 http://demo.cssworld.cn/3/2-6.php 或 者 扫 
右 侧 的 二 维 码 。 


ey 


3) 最 大 宽 


尊 


最 大 宽度 就 是 元 素 可 以 有 的 最 大 宽度 。 我 自己 是 这 么 理解 的 ,“ 最 
大 宽度 ”实际 等 同 于 “ 包 正 性 ”元 素 设置 white-space:nowrap 声 明 后 
的 宽度 。 如 果 内 部 没有 块 级 元 素 或 者 块 级 元 素 没有 设 定 宽度 值 ， 则 “最 
大 宽度 ”实际 上 是 最 大 的 连续 内 联 盒子 的 宽度 。 


什么 是 连续 内 联 盒子 ?“ 内 联 盒子 ”的 内 容 会 在 3.4 世 深入 讲解 ， 这 
里 你 就 简单 地 将 其 理解 为 dijsplay 为 in1ine、inline-block、inline- 


table 等 元 妹 。*“ 连 续 内 联 盒 子 ” 指 的 全 部 都 是 内 联 级 别 的 一 个 或 一 扒 元 
素 ， 中 间 没 有 任何 的 换行 标签 <br> 或 其 他 块 级 元 素 。 


一 图 胜 干 言 ， 图 3-15 所 示 是 一 段 很 平 第 的 HTML 厂 段 的 “连续 内 联 
盒子 ”信息 标注 图 。 其 中 ， 有 3 处 连续 内 联 盒 子 ， 分 别 是 : 


<br> 前 面 的 4 个 内 联 盒子 组 合 ; 
<br> 后 面 " 我 是 下 一 行 ?字样 所 在 的 匿名 内 联 盒 子 ; 
最 后 块 状 <p> 标 签 内 的 内 联合 于 ， 也 就 是 一 段 文 本 。 


与 标注 图 “内 联 ” 文 字 对 应 的 标注 相 一 致 ， 此 时 “最 大 宽度 ” 束 是 这 3 
个 连续 内 联 盒子 的 宽度 的 最 大 值 。 


如 采 把 标注 图 的 代码 在 浏览 器 中 运行 一 下 ， 则 在 最 大 宽度 模式 
下 ， 歼 果 如 图 3-16 所 示 。 可 以 发 现 最 后 的 宽度 就 是 第 一 个 “连续 内 联 盒 
子 ” 的 宽度 。 


3 div 
0 “一 > "我 是 文本 " 

~ 一 一 > “span>» 我 在 inline 标 答 内 </span 
向 联 ~ <button> 我 是 按钮 </button 
内 联 一 -一 > ‘img src="shuai.png”alt=" 我 是 图 片 
人 
内 联 一 “我 下 下 有 行 ” Cl 一 下 败 形 

、 一 > p> 我 是 一 段 描述 </p 和 
快 . 状 </div 


图 3-15 “连续 内 联 盒子 "信息 标注 图 


图 3-16 ”最 大 宽度 模式 下 的 效果 


“最 大 宽度 ”对 我 们 实际 开发 有 什么 作用 呢 ? 


根据 我 这 么 多 年 的 经 验 ， 大 部 分 需要 使 用 “最 大 宽度 ”的 场景 都 可 
以 通过 设置 一 个 “很 大 宽度 ”来 实现 。 注 意 ， 这 里 的 “很 大 宽度 ”和 “最 大 
宽度 ”是 有 本 质 区 别 的 。 比 方 说 ， 有 5 张 图 片 ， 每 张 图 片 宽 度 200 像 素 ， 
假设 图 片 元 了 素 紧密 排列 ， 则 “最 大 宽度 ” 束 是 1000 像 素 。 但 是 ， 实 际 开 
发 的 时 候 ， 我 们 懒得 计算 ， 可 能 直接 设置 容器 width:20009px， 这 里 
2000px 束 是 “很 大 宽度 "， 视 度 足 够 大 ， 作 用 是 保证 图 片 不 会 因为 容器 
宽度 不 足 而 不 在 一 行内 显示 。 两 者 都 能 实现 几 张 图 片 左右 滑 来 滑 去 的 
人 


那 有 没有 场景 只 能 是 “最 大 宽度 "而 不 是 “很 大 宽度 * 呢 ? 有 ! 不 知 大 
家 有 没有 听 过 iSeroll， 它 可 以 实现 非常 平滑 的 滚动 效果 ， 在 前 端 界 颇 有 
名 气 。 


一 般 来 讲 ， 实 现 自 定义 滚动 有 两 种 原理 :一 种 借助 原生 的 深 动 ， 
scrollLeft/scrol1Top 值 变化 ， 它 的 优点 是 简单 ， 不 足 是 效果 采 
板 ; 另 一 种 是 根据 内 部 元 素 的 尺寸 和 容器 的 关系 ， 通 过 修改 内 部 元 素 
的 位 置 实现 滚动 效果 ， 优 点 是 效果 可 以 很 红 放 。isScrol 束 是 使 用 的 后 


者 ， 因 此 ， 如 果 我 们 希望 使 用 iScroll 模 拟 水 平 滚动 ， 只 能 是 使 用 “最 大 
宽度 ”， 这 样 ， 深 动 到 底 的 时 候 才 是 真 的 到 奔 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-7.php 或 者 扫 下 面 的 
二 维 码 。 保 证 在 一 行 显示 ， 同 时 不 浪费 一 点 空白 ， 如 图 3-17 所 示 。 


要 
海 动 到 萌 大 


图 3-17 最 大 宽度 与 精确 深 动 示意 


3.2.2 ”width 值 作用 的 细节 


细心 的 读者 有 没有 发 现 ， 前 面 那么 多 页 ， 其 实 就 讲 了 一 个 点 一 一 
width:auto， 说 “ 深 藏 不 露 * 不 是 忽悠 你 们 吧 ? 下 面 ， 转 换 思 维 ， 我 
们 来 看 一 下 width 属性 使 用 具体 数值 会 有 怎样 的 表现 。 


比方 说 ， 对 于 一 个 <div> 元 素 ， 我 们 设 定 其 宽度 为 100px， 如 下 : 
请 问 ，100px 的 宽度 是 如 何 作 用 到 这 个 <div> 元 素 上 的 ? 


要 回答 这 个 同 题 ， 就 需要 了 解 CSS 世 界 中 与 尺寸 相关 的 一 个 重要 概 


人 “ 盒 尺 寸 ” (box dimension) 。 


前 文 多 次 强调 了 ，width 是 作用 在 “内 在 盒子 ”上 的 ， 乍 一 看 是 一 
个 普通 的 盒子 ， 实 际 上 ， 这 个 “内 在 盒子 是 由 很 多 部 分 构成 的 。 这 个 
盒子 的 构成 和 地 球 结构 的 构成 惊人 地 类 似 ， 可 参考 图 3-18 所 示 的 这 张 我 
制作 的 示意 图 (图 中 虚线 、 实 线 是 为 了 区 分 不 同 结 构 ， 本 身 并 没有 意 
pan 


CSS 盒 尺寸 区 域 地 球 构造 区 域 


margin ( 透明 ) 
border 


padding 


| 1 
| 1 
| 1 
| 1 
| 1 
| I 
| 1 
| 1 
| 1 
1 

1 content 
l 1 
| 1 
| 1 
l 1 
l 1 
| 1 
| 1 
| 1 
| 1 
l 1 


图 3-18” 盒 尺寸 盒子 结构 和 地 球 结构 对 比 图 


仔细 对 比 会 发 现 ， 两 者 不 仅 结构 类 似 ， 对 应 结构 的 视觉 表现 和 含 
义 也 类 似 。 比 方 说 ，CSS 的 margin 区 域 和 地 球 的 大 气 层 区 域 都 是 透明 
的 ， 又 比方 说 content 之 于 CSS， 正 如 地 核 之 于 地 球 ， 都 是 属于 核 
心 ， 因 为 CSS 世 界 的 诞生 就 是 为 图 文 信息 展示 服务 的 ， 因 此 ， 内 容 一 定 
是 最 重要 的 核心 。 然 后 在 这 个 核心 的 外 面包 于 了 padding、border 和 


margin。 


CSS 世 界 什么 最 多 ? 盒子 ! 比方 前 面 介绍 过 的 块 状 盒子 、 内 联 盒子 
以 及 外 在 金子 和 内 在 盒子 ， 以 及 这 里 即将 出 现 的 4 个 盒子 ， 以 及 3.4 节 介 
绍 的 一 堆 人 金子 。 如 果 这 些 盒子 纯粹 是 概念 ， 没 什么 实际 作用 ， 我 束 不 
讲 或 直接 一 步 带 过 ， 但 是 ， 这 里 的 这 4 个 盒子 不 仅仅 是 概念 ， 还 真 的 有 
付 请 实践 的 关键 字 ， 所 以 还 旦 要 好 好 说 一 说 。 


我 们 的 这 个 “内 在 盒子 ” 义 被 分 成 了 4 个 盒子 ， 分 别 是 content box、 
padding box ~ border box 和 margin box ° 


原本 这 几 个 盒子 只 存在 于 规范 中 ， 我 们 写 代 码 的 知 不 知道 无 所 谓 
的 ， 都 能 写 出 很 梭 的 CSS 代 码 ， 这 束 和 玩 游 戏 没 必 要 知道 游戏 把 么 制作 
的 道理 一 样 。 但 十 后 来 ， 这 几 个 盒子 在 CSS 语 言 层 有 名 字 了 ,一 下 了 于 变 
成 有 吴 份 的 人 了 ， 事 情 融 变 了 了， 如果 对 这 些 盒子 不 了 解 ， 有 些 CSS 属 性 
束 不 好 理解 ， 也 不 容易 记 住 。 


那么 都 给 它们 起 了 些 什么 名 字 呢 ?content box 写作 content - 
box，padding box 写作 padding-box，border box 写 作 border - 
box，margin box 写 作 .…. 突 然 发 现 ，margin box 居 人 然 没 有 名 字 ! 为 何 唯 
独 margin box 并 没有 对 应 的 CSS 天 键 字 名 称 呢 ? 因为 目前 没有 任何 场 


景 需 要 用 到 margin box。 


“margin 的 青 景 永 远 是 透明 的 ”， 因 此 不 可 能 作为 backgound - 
clLip 或 background-origin 属 性 值 出 现 。margin 一 旦 设 定 具 体 宽 
度 和 高 度 值 ， 其 本 身 的 尺寸 是 不 会 因 margin 值 变化 而 变化 的 ， 因 此 作 
为 box-sizing 的 属性 值 存在 也 就 没有 了 意义 (这 会 在 后 面 深 入 并 
述 ) 。 既 然 无 用 武之 地 ， 自 然 就 被 抛弃 了 。 


现在 回 到 一 开始 的 问题 ，width:100px 是 如 何 作用 到 <div> 元 素 
上 的 ? 


在 CSS2.1 的 规范 中 ， 有 一 段 非常 露骨 的 描述 :content box 环 统 着 
width 和 height 给 定 的 矩形 。 


说 得 这 么 直 日 ， 我 已 经 没什么 其 他 可 说 的 了 。 明 摆 痢 ， 
width;:100px 作 用 在 了 content box 上 ， 由 于 <div> 元 素 默 认 的 


padding、border 和 margin 都 是 909， 因此 ， 该 <div> 所 呈现 的 宽度 
就 是 100 像 素 。 


那么 按照 这 种 说 法 ， 如 采 我 们 在 水 平方 向 给 定 padding 和 border 
大 小 ， 则 元 系 的 斥 才 吏 不 是 100 像 素 了 ? 我 们 看 一 个 商 单 的 例子 : 


div { width: 100px; padding: 20px; border: 20px solid; } 


手动 输入 http://demo.cssworld.cn/3/2-8.php 或 者 扫 下 面 的 二 维 码 。 结 
末 变 成 了 180 像 素 宽 ， 如 图 3-19 所 示 。 


此 时 元 素 的 
offsetWidth 
是 : 180 


图 3-19 ”默认 使 尺寸 下 的 offsetWidth 


为 什么 会 变 宽 呢 ?其 实 很 好 理解 ， 因 为 宽度 是 作用 在 content box 上 
的 ， 而 外 面 围 绕 的 padding box 和 border box 又 不 是 摆设 ， 目 然 实际 尺寸 
要 比 设 定 的 大 。 这 就 好 比 某 超 模 的 腰围 61 cm， 衷 了 件 东 北大 棉 检 S， 自 
然 此 时 的 腰围 要 远大 于 61 cm。 如 图 3-20 所 示 ， 中 间 有 点 上 蓝 的 就 是 
content 区 域 ， 宽 度 100 像 素 ， 再 加 上 padding 和 border 左 右 各 20 像 
素 ， 最 终 宽 度 避 是 180 像 素 啦 


图 3-20 180 像素 宽度 的 盒 模型 


如 果 单 看 定义 和 表现 ， 似 乎 一 切 都 合情合理 ， 但 实际 上 ， 多 年 的 
实践 告诉 我 ， 有 时候， 这 种 宽度 设 定 和 表现 并 不 合理 。 我 总 结 为 以 下 
两 点。 


(1) 流动 性 丢失 。 


对 于 块 状元 素 ， 如 果 width:auto， 则 元 素 会 如 水 流 般 充满 整个 
容器 ， 而 一 旦 设 定 了 width 具 体 数 值 ， 则 元 素 的 流动 性 就 会 被 阻 断 ， 
因为 元 素 给 定 宽度 就 像 河流 中 间 竖 了 两 个 大 闸 一 样 ， 就 没有 了 流动 
性 。 尤 其 宽度 作用 在 content box 上 ， 更 是 内 外 流动 性 全 无 ， 如 图 3-21 所 
A 


这 世界 上 任何 事物 ， 一 旦 限 死 了 ， 束 形 失 了 灵活 性 ， 其 发 展 湾 力 


及 作用 范围 束 会 大 大 受 限 。 

长 江 为 何 生 机 吉 勃 数 千 年， 就 是 因为 滔滔 江水 ， 奔 流 不 上 电 。CSS 的 
流动 性 也 是 其 生机 秆 勃 之 本 ， 如 果 直 接 宽 度 设 死 ， 流 动 性 丢失 ， 在 我 
看 来 ， 束 是 江河 变 死 水 ， 手 机 变 板 夸 。 这 束 古 我 提出 “无 宽度 准则 ”的 
原因 一 一 布局 会 更 灵活 ， 容 错 性 会 更 强 。 


width:auto: width:100Px: 


lel 


图 3-21 流动 性 缺失 示意 图 


鉴于 “流动 性 丢失 "在 3.2.1 节 其 实 已 经 提 过 ， 还 有 实例 ， 这 里 就 不 


再 过 多 展开 。 


(2) 与 现实 世界 表现 不 一 致 的 困扰 。 
包含 padding 或 border 会 让 元 素 宽 度 变 大 的 这 种 CSS 表 现 往往 会 
实 是 希望 整个 最 终 的 宽 


让 CSS 使 用 者 困惑 : 我 设置 视 度 为 100 像 素 ， 其 
度 是 100 像 素 ， 这 样 才 符合 现实 理解 嘛 。 比 方 说 ， 我 买 个 140m“ 的 房 
子 ， 肯 定 是 连 墙 体 面积 在 内 的 啊 ， 实 际 使 用 面积 比 140m“ 小 才 是 现实 ， 
你 说 现在 最 终 面 积 比 140m“ 还 大 ， 这 种 事情 显然 是 不 科学 不 合理 的 。 


或 许 是 因为 CSS 2.1 是 面向 内 容 (图 文 信息 ) 设计 的 ， 所 以 ， 
width 设计 成 了 直接 作用 在 content box 上 。 


这 对 一 些 CSS 新 手 的 布局 造成 了 一 定 的 障碍 ， 因 为 这 些 CSS 从 业者 
有 眼中 的 CSS 结 构 是 砖 块 ， 而 不 是 水 流 。 因 此 ， 布 局 讲求 尺寸 精确 计算 。 
这 束 寻 致 在 一 些 CSS 属 性 值 发 生变 化 的 时 候 (如 padding 值 变 大 ， 元 
素 尺寸 也 变 大 ) ， 空 间 不 足 ， 出 现 页 面 布局 错位 的 问题 。 


那 有 没有 什么 办 法 能 避免 这 种 铺位 问题 的 出 现 呢 ? 方法 之 一 职 是 
采用 书写 方式 约束 ， 如 使 用 “宽度 分 离 原 则 ”。 
3.2.3 CSS 流体 布局 下 的 宽度 分 离 原 则 


所 谓 “ 宽 度 分 离 原 则 ”， 就 是 CSS 中 的 width 属性 不 与 影响 宽度 的 
padding/border (有 时 候 包 括 margin) 属性 共存 ， 也 就 是 不 能 
现 以 下 的 组 合 : 

或 者 


有 人 可 能 会 问 : 不 这 么 写 ， 该 怎么 写 呢 ? 很 简单 ， 分 离 ，width 
独立 占用 一 层 标 签 ， 而 padding、border、margin 利 用 流动 性 在 内 部 目 
适应 呈现 。 


father { 
width: 180px; 


,SOn { 


margin: © 20px; 
padding: 20px; 
border: 1px solid; 


} 


现在 关键 问题 来 了 : 为 何 要 宽度 分 离 ? 
1. 为 何 要 宽度 分 离 


在 前 端 领域 ， 一 提 到 分 离 ， 作 用 一 定 是 便于 维护 。 比 方 说 ， 样 式 
和 行为 分 离 、 前 后 问 分 离 be 文 里 的 “宽度 分 离 ”。 


道理 其 实 很 简单 ， 当 一 件 事情 的 发 展 可 以 被 多 个 因素 所 左右 的 时 
候 ， 这 个 事情 最 终 的 结果 就 会 变数 很 大 而 不 可 预期 。 宽 度 在 这 里 也 是 
类 似 ， 由 于 使 尺寸 中 的 4 个 盒子 都 能 影响 宽度 ， 目 然 页 面 元 素 的 最 终 宽 
度 束 很 容易 发 生变 化 而 导致 意 想 不 到 的 布局 发 生 。 例 如 ， 下 面 这 个 简 
单 的 CSS: 


.box { 
width: 100px; 


border: 1px solid; 
} 


此 时 宽度 是 102 像 素 。 然 后 ， 设 计 师 希望 元 素 边 框 内 有 20 像 素 的 留 白 ， 
这 时 候 ， 我 们 会 增加 padding 设 置 : 


.box { 
width: 100px; 
padding: 20px; 
border: 1px solid; 


} 


结果 此 时 视 度 变 成 了 142 像 素 ， 大 了 40 像 素 ， 跟 原来 宽度 差异 明显 ， 显 
然 布局 很 容易 出 问题 。 为 了 不 影响 之 前 的 布局 ， 我 们 还 需要 通过 计算 


减 去 40 像 素 的 padding 大 小 才 行 : 


.box { 
width: 60px; // 通过 计算 , 减 去 40 像 素 


padding: 20px; 
border: 1px solid; 


} 


但 是 ， 如 果 我 们 使 用 了 宽度 分 离 ， 事 情 就 会 轻松 很 多 : 
,father { 
width: 102px; 


,SOn { 
border: 1px solid; 
} 


藤 套 一 层 标签 ， 父 元 素 定 宽 ， 子 元素 因为 width 使 用 的 是 默认 值 
auto， 所 以 会 如 水 流 般 自动 填 满 父 级 容器 。 因 此 ， 子 元 素 的 content 
box 宽 度 就 是 100 像 素 ， 和 上 面 直 接 设置 width 为 100 像 素 表现 一 样 。 


然后 ， 同 样 的 故事 ， 设 计 师 布 望 元 系 边 框 内 有 20 像 素 的 留 日 ， 这 
时 候 ， 我 们 会 增加 padding 设 置 : 


,father { 
width: 102px; 


,SOn { 
border: 1px solid; 
padding: 20px; 


2 就 没有 然后 了， 宽度 还 是 102 像 素 ， 子 元 素 的 content box 
目 动 变 成 了 60 像 素 ， 和 上 面 反例 的 表现 一 样 。 没 错 ， 目 动 变 化 了 ， 束 


是 这 么 智能 ! 


虽然 表现 一 样 ， 但 是 写 代 码 的 人 的 体验 却 大 不 一 样 : width、 
padding、border 混 用 的 时 候 ， 任 何 修改 我 们 都 需要 实时 去 计算 现在 
width 应 该 设置 多 大 才能 和 之 前 的 占用 的 宽度 一 样 ， 而 后 面 width 分 
离 的 实现 ， 我 们 没有 任何 计算 ， 要 padding 留 日 ， 加 一 下 束 好 ， 要 修 
改 边 框 宽度 ， 改 一 下 就 好 ， 浏 览 器 会 自动 计算 ， 完全 不 用 担心 尺寸 的 


es 


也 就 是 说 ， 使 用 “宽度 分 离 " 后 ， 咱 们 不 需要 烧 脑 子 去 计算 了 ， 而 
且 页 面 结 构 反 而 更 稳固 。 这 么 好 的 事情 ， 完 全 没有 理由 拒绝 啊 ! 


2. 可 能 的 挑战 


有 人 可 能 会 提出 挑战 : 你 这 “宽度 分 离 " 多 使 用 了 一 层 标签 啊 ， 这 
HTML 成 本 也 走 成 本 啊 ! 


没 错 ， 问 题 本 身 是 对 的 。HTML 的 成 本 也 是 成 本 ， 过 深 的 嵌 套 是 会 
增加 页 面 浑 染 和 维护 成 本 的 。 但 是 ， 我 这 里 要 抛 出 一 句 话 ， 实 际 上 ， 
如 采 不 考虑 替换 元 素 ， 这 世界 上 绝 大 多 数 的 网 页 ， 只 需要 一 个 width 
设 定 就 可 以 了 ， 没 错 ， 只 需要 一 个 width， 就 是 最 外 层 限制 网 页 主体 
内 容 宽度 的 那个 width， 而 里 面 所 有 元 素 都 没有 理由 再 出 现 width 设 
置 。 所 以 “宽度 分 离 ”" 虽 然 多 了 一 层 标 签 ， 但 最 终 也 束 多 了 一 层 标 签 
而 已 ， 这 个 成 本 跟 收 益 比 起 来 简直 束 古 毛毛 雨 。 


但 是 ， 话 又 说 回来 ,“ 无 宽度 ”网 页 布局 是 需要 很 深 的 CSS 积 素 才 能 
当 弘 目 如 的 ， 很 多 同行 没 好 好 品 鉴 本 书 的 内 容 ， 要 是 让 他 们 完全 遵 
循 “ 宽 度 分 离 ” 来 实现 ， 怕 是 HTML 会 变 得 很 史 喧 。 


那 有 没有 什么 既 无 须 计算 ， 又 无 须 额 外 骨 套 标签 的 实现 呢 ? 有 ， 
那 就 是 可 以 改变 width 作 用 细 市 的 box-sizing 属 性 。 


3.2.4 ”改变 width/height 作 用 细节 的 box-sizing 


box-sizing 虽 然 是 CSS3 必 性， 但 是 ， 让 人 受宠若惊 的 是 IE8 浏 览 
器 也 是 支持 它 的 ， 不 过 需要 加 -ms- 私 有 前 缀 ， 但 IE9 浏 览 器 开始 就 不 需 
要 私有 前 缀 了 。 


本 书 内 容 是 针对 IE8 及 以 上 版 本 浏 贤 絮 的 ， 因 此 ，box-sizing 世 
加 入 了 CSS 世 界 魔法 师 的 队伍 。 


1. box-sizing 的 作用 


box-sizing 有 顾名思义 职 是 “ 盒 尺 寸 ”。 稍 等 ， 前 文 好 像 也 出 现 了 
一 个 “ 盒 尺 寸 ”(box dimension) ， 喷 ? 两 者 是 一 样 的 吗 ? 我 个 人 觉得 是 
一 样 的 ， 只 是 dimension 这 个 词 太 过 于 官方 了 ， 用 在 规范 中 很 合适 ， 但 
是 ， 要 是 作为 CSS 属 性 ， 拼 写 吏 不 那么 容易 了 ， 上 所 以 束 使 用 了 更 口语 化 


的 box-sizing。 


虽然 box-sizing 被 直译 为 "使 太 寸 "， 实 际 上 ， 其 更 准确 的 叫 法 
应 该 是 “使 太 二 的 作用 细 ”， 或 者 说 得 更 通俗 一 点 ， 叫 “width 作用 的 
田 T”， 也 束 生 说 ，box-sizing 属 性 的 作用 是 改变 width 的 作用 细 


NVS 


二 


那 它 改变 了 什么 细 蔬 呢 ? 一 句 话 ， 改 变 了 width 作 用 的 合子。 还 
记 不 记得 “内 在 盒子 ”的 4 个 盒子 ? 它们 分 别 是 content box 、padding 
box、border box 和 margin box。 默 认 情 况 下 ，width 是 作用 在 content 


box 上 的 ，box-sizing 的 作用 就 是 可 以 把 width 作 用 的 盒子 变 成 其 他 
几 个 ， 因 此 ,理论 上 ，box-sizing 可 以 有 下 面 这 些 写法 : 


,box1 { box-sizing: content-box; } 
.box2 { box-sizing: padding-box; } 


.box3 { box-sizing: border-box; } 
,box4 { box-sizing: margin-box; } 


理论 美好 ， 现 实 残 酷 。 实 际 上 ， 支 持 情 况 如 下 : 


.box1 { box-sizing: content-box; } /* 默认 值 */ 

.box2 { box-sizing: padding-box; } /* Firefox 曾 经 支持 */ 
.box3 { box-sizing: border-box; } /* 全 线 支 持 */ 

.box4 { box-sizing: margin-box; } /* 从 未 支持 过 */ 


所 以 ， 我 只 能 拿 border -box 属 性 值 做 对 比 ， 如 图 3-22 所 示 。 


box-sizing: content-box.; box-sizing: border-box; 


上 一 100px 一 一 F100 


T TT 


padding border padding border 


图 3-22 box-sizing 不 同 值 的 作用 原理 示意 


可 以 看 到 ， 所 谓 box-sizing:border-box 就 是 让 100 像 素 的 宽 
度 直 接 作 用 在 border box 上 ， 从 默认 的 content box 变 成 border box。 此 
时 ，content box 从 宽度 值 中 释放 ， 形 成 了 局 部 的 流动 性 ， 和 padding 
一 起 自动 分 配 width 值 。 于 是 ， 


.box { 
width: 100px; 


box-sizing: border-box 
} 


宽度 是 100 像 素 ， 


.box 区 
width: 100px; 


box-sizing: border-box; 
border: 1px solid; 


} 


宽度 也 是 100 像 素 ， 


.box { 
width: 100px; 
box-sizing: border-box; 
padding: 20px; 
border: 1px solid; 


} 


宽度 还 是 100 像 素 。 


我 们 似乎 找到 了 解决 问题 的 钥 古 ， 目 从 用 了 box-sizing， 标 等 
层级 少 了 ， 错 位 问题 不 见 了 ， 一 口气 写 5 张 页 面 ， 不 费劲 。 


实际 上 ， 当 遭遇 类 似 图 3-23 所 示 的 布局 时 ， 你 会 发 现 ，box- 
sizing 也 是 捉襟见肘 ， 因 为 边框 外 的 间距 只 能 是 margijn， 但 box- 
sizing 并 不 支持 margin-box， 若 想 用 一 层 标签 实现 ， 还 是 需要 计 
算 ! 


图 3-23 box-sizing 也 无 能 为 力 的 布局 结构 


2. 为 何 pbox-sizing 不 支持 margin-box 


遇 到 这 样 的 场景 的 时 候 ， 想 必 有 人 会 感 疏 :“ 要 是 box-sizing 文 
持 margin-box 束 好 了 。” 十 啊 ， 要 十 这 样 束 好 了 ， 但 是 现实 束 是 不 文 
有 


网 上 有 这 样 的 说 法 ， 说 margin 在 垂直 方向 有 合并 重 王 特性， 如 果 
文 择 了 margin-box， 合 并 规则 莽 要 发 生变 更 ， 会 比较 复杂 。 我 对 此 
观点 不 敢 苛 同 ， 其 实 当下 很 多 属性 可 以 炙 挥 margin 合 并 ， 多 一 个 
box-sizing 又 何妨 ， 且 训 硕 大 广 商 实 现 起 来 并 不 难 ， 跟 之 前 的 规范 
也 不 冲突 。 


我 个 人 认为 ， 不 支持 margin-box 最 大 的 原因 是 它 本 身 就 没有 价 
值 ! 我 们 不 妨 好 好 想 想 ， 一 个 元 素 ， 如 果 我 们 使 用 width 或 height 设 
定好 了 尺寸 ， 请 问 ， 我 们 此 时 设置 margin 值 ， 其 offset 尺 寸 会 有 变 
化 吗 ? 不 会 啊 ，100 像 素 宽 的 元 素 ， 再 怎么 设置 margin， 它 还 是 100 像 


素 宽 。 但 是 ，border 和 padding 就 不 一 样 了 ，100 像 素 宽 的 元 素 ， 设 
置 个 20 像 素 大 小 的 padding 值 ，offsetwidth 就 是 140 像 素 了 ， 尺 十 
会 变化 。 你 说 ， 一 个 本 身 并 不 会 改变 元 素 尺寸 的 盒子 ， 它 有 让 box- 
sizing 支 持 的 道理 吗 ? box-sizing 就 是 改变 尺寸 作用 规则 的 ! 
margin 只 有 在 width 为 auto 的 时 候 可 以 改变 元 素 的 太 寸 ， 但 是 ， 此 
时 元 素 已 经 处 于 流动 性 状态 ， 根 本 就 不 需要 box-sizing。 所 以 ,说 
来 说 去 就 是 margin-box 本 身 就 没有 价值 。 


另外 一 个 原因 牵扯 到 语义 。 如 果 box-sizing 开 了 先河 文 持 了 
margin-box，margin box 束 变 成 了 一 个 “ 显 式 的 盒子 ”"， 你 让 
background-origin 等 属性 何去何从 ， 文 持 还 是 不 文 持 
呢 ?“margin 的 背景 永远 是 透明 的 ”这 几 个 大 字 可 是 在 规范 写 得 清 清楚 
楚 ， 难 道 让 背景 色 在 所 谓 的 margin box 中 也 显示 ? 显然 是 不 可 能 的 ， 我 
们 可 以 打 自 己 的 脸 ， 但 是 要 想 让 规范 打 自 己 的 脸 ， 可 能 吗 ? 


最 后 还 有 一 个 可 能 的 原因 就 是 使 用 场景 需要 。 对 于 box-sizing 
的 margin-box 效 果 ， 如 果 是 [E10 及 以 上 版 本 浏览 器 ， 可 以 试 试 flex 布 
局 ， 如 果 要 兼容 IE8 及 以 上 版 本 可 以 使 用 “宽度 分 离 ?， 或 者 特定 场景 
使 用 “格式 化 宽度 ”来 实现 ， 也 就 是 并 不 是 强 需 求 。 比 方 box- 
sizing:padding-box， 就 是 因为 使 用 场景 有 限 ， 仪 Firefox 浏 览 器 文 
持 ， 并 且 是 曾经 支持 ， 从 版 本 50 开 始 也 不 支持 了 。 其 实 ， 我 个 人 觉得 
没 必 要 舍弃 ， 浏 览 器 都 应 该 支持 ， 就 像 Dackground 属 性 那样 。 成 为 
套餐 不 挺 好 的 ? 


人 们 写 代 码 时 的 思维 逻辑 ， 总 是 不 由 自主 地 与 现实 世界 相映 射 ， 
这 是 人 之 常情 。 因 此 ， 大 家 对 box-sizing:border-box 的 好 感度 普 
遍 要 远大 于 默认 的 box-sizing:content-box， 甚 至 我 见 到 有 同行 
称 默认 的 content-box 作 用 机 制 是 反 人 类 的 ， 因 此 ， 很 多 同行 开始 使 
用 *{box-sizing:border-box} 进 行 全 局 重 置 ， 对 于 这 种 做 法 ， 我 
是 有 自己 的 看 法 的 。 


3. 如 何 评价 *{box-sizing:border-box} 


从 纯 个 人 角度 讲 ， 我 是 不 喜欢 这 种 做 法 的 ， 我 一 向 推 深 的 是 充分 
利用 元 素 本 身 的 特性 来 实现 我 们 想 要 的 效果 ， 足 够 简单 纯粹 。 因 此 ， 
全 局 重 罩 的 做 法 是 有 屠 我 的 理念 的 。 


即使 扼 开 个 人 喜好 ， 这 种 做 法 也 是 有 些 问 题 的 。 


(1) 这 种 做 法 易 产 生 没 必要 的 消耗 。 通 配 符 应 该 是 一 个 慎 用 的 选 
择 器 ， 因 为 它 会 选择 所 有 的 标签 元 素 。 对 于 普通 内 联 元 素 ( 非 图 片 等 
替换 元 素 ) ，box-sizing 无 论 是 什么 值 ， 对 其 演 染 表现 都 没有 影 
响 ， 因 此 ， 对 这 些 元 素 而 言 就 是 没有 必要 的 消耗 ， 同时 有 些 元 素 ， 如 
search 类 型 的 搜索 框 ， 其 默认 的 box-sizing 就 是 porder-box (如 
果 浏 览 器 支持 ) ， 因 此 ，* 对 search 类 型 的 <input> 而 言 也 是 没有 必 
要 的 消耗 。 


(2) 这 种 做 法 并 不 能 解决 所 有 问题 。box-sizing 不 文 持 
margin-box， 只 有 当 元 素 没有 水 平 margin 时 候 ，box-sizing 才 能 
真正 无 计算 ， 而 “宽度 分 离 ”等 策略 则 可 以 彻底 解决 所 有 的 宽度 计算 的 
问题 。 因 此 ， 我 们 有 必要 好 好 地 想 一 想 ，box-sizing 属 性 发 明 的 初 


衷 到 底 是 什么 ? 是 为 了 让 那些 对 block 水 平 元 素 滥用 width 属 性 的 人 
少 出 bug 吗 ? 我 不 这 么 认为 ! 


4. box-sizing 发 明 的 初衷 


根据 我 这 么 多 年 的 开发 经 验 ， 在 CSS 世 界 中 ， 唯 一 离 不 开 box- 
sizing:border-box 的 就 是 原生 普通 文本 框 <input> 和 文本 域 
<textarea> 的 100% 自 适应 父 容器 宽度 。 


拿 文本 域 <textarea> 举 例 ，<textarea> 为 奉 换 元 素 ， 和 替换 元 
素 的 特性 之 一 就 是 尺寸 由 内 部 元 素 决 定 ， 且 无 论 其 display 属 性 值 是 
inline 还 是 block。 这 个 特性 很 有 意思 ， 对 于 非 奉 换 元 素 ， 如 采 其 
display 属 性 值 为 Dlock， 则 会 具有 流动 性 ， 宽 度 由 外 部 尺寸 决定 ， 
但 是 替换 元 素 的 宽度 却 不 受 display 水 平 影响 ， 因 此 ， 我 们 通过 CSS 
修改 <textarea> 的 display 水 平 是 无 法 让 尺寸 100% 目 适应 父 容 姻 
的 : 


textarea { 


display: block; 


所 以 ， 我 们 只 能 通过 width 设 定 让 <textarea> 尺 寸 100% 自 适应 父 容 
器 。 那 么 ， 问 题 就 来 了 ，<textarea> 是 有 border 的 ， 而 且 需 要 有 一 
定 的 padding 大 小 ， 否 则 输入 的 时 候 光标 会 顶 着 边框 ， 体 验 很 不 好 。 
于 是 ，width/border 和 padding 注 定 要 共存 ， 同 时 还 要 整体 宽度 
100% 自 适应 容器 。 如 果 不 借助 其 他 标签 ， 肯 定 是 无 解 的 。 


在 浏览 器 还 没 支持 box-sizing 的 年 代 ， 我 们 的 做 法 有 点 儿 类 似 
于 “宽度 分 离 ”， 外 面 藤 套 <div> 标 签 ， 模 拟 porder 和 padding， 
<textarea> 作 为 子 元 素 ，border 和 padding 全 部 为 0， 然 后 宽度 
100% 目 适应 父 级 <div>。 


手动 输入 http://demo.cssworld.cn/3/2-9.php 或 者 扫 右 侧 的 二 维 码 。 


然而 ， 这 种 模拟 也 有 局 限 性 ， 比 如 无 法 使 用 :focus 高 亮 父 级 的 边 
框 ， 因 为 CSS 世 界 中 并 无 父 和 光 择 右 ， 只 能 使 用 更 复 灯 的 藤 侠 加 其 他 CSS 
技巧 来 模拟 。 


因此 ， 说 来 说 去 ， 也 就 box-sizing:border-box 才 是 根本 解决 
之 道 ! 
textarea { 


width: 100%; 
-ms-box-sizing: border-box; /* for IE8 */ 


box-sizing: border-box; 


在 我 看 来 ，box-sizing 被 发 明 出 来 最 大 的 初衷 应 该 是 解决 替换 
元 素 宽度 自 适应 问题 。 如 果真 的 如 我 所 言 ， 那 *{box- 
sizing:border-box}y 是 不 是 没 用 在 点 儿 上 呢 ? 是 不 是 应 该 像 下 面 这 
样 CSS 重 置 才 更 合理 呢 ? 


input, textarea, img, video, object { 
box-sizing: border-box; 


} 


3.2.5 ”相对 简单 而 单纯 的 height :auto 


width 和 height 是 CSS 世 界 中 同一 类 型 魔法 师 ， 都 是 直接 限定 
素 尺 寸 的 。 所 以 ， 它 们 共用 一 套 “ 爹 尺寸 "模型 ， a 
也 是 类 似 的 。 但 是 ， 它 们 在 不 少 地 方 还 是 有 明显 区 别 的 ， 其 中 之 一 就 
是 height:auto 要 比 width:auto 简 单 而 单纯 得 多 


原因 在 于 ，CSS 的 默认 流 是 水 平方 向 的 ， 宽 度 是 稀缺 的 ， 高 度 是 无 
限 的 。 因 此 ， 宽 度 的 分 配 规则 就 比较 复杂 ， 高 度 就 显得 比较 随意 。 比 
方 说 ， 小 明 没 钱 交 房租 而 去 搬 砖 ， 一 块 砖头 5 cm 高 ， 请 问 ，10 块 砖 反 a 
在 一 起 多 高 ? 很 简单 ，50 cm。 es 
个 套路 : 有 几 个 元 素 盒 子 ， 每 个 多 高 ， 然 后 一 加 ， 就 是 最 终 的 高 度 值 
人 


当然 ， 涉 及 具体 场景 ， ei 比方 说 元 妈 float 
硕 高 度 没 了 ， 或 者 是 margin 直 接 穿 过 去 ， 高 度 比 预期 的 矮 了 。 这 个 
实 不 是 height 的 问题 。 关 于 这 一 点 ， 。 会 在 对 应 的 属性 章节 帮 大 家 
一 探究 


容 
其 


3 
| 


此 外 ，height:auto 也 有 外 部 尺寸 特性 。 但 据 我 所 知 ， 其 仅 存 在 
于 绝对 定位 模型 中 ， 也 就 是 “格式 化 高 度 ”。“ 格 式 化 高 度 ” 与 “格式 化 宽 
度 ” 类 似 ， 就 不 展开 讲解 了 。 


3.2.6 ”关于 height :100% 


height 和 width 还 有 一 个 比较 明显 的 区 别 就 是 对 百分比 单位 的 支 
持 。 对 于 width 属 性 ， 就 算 父 元 素 width 为 auto， 其 百分比 值 也 是 支 
持 的 ; 但 是 ， 对 于 height 属 性 ， 如 果 父 元 素 height 为 auto， 只 要 子 
元 素 在 文档 流 中 ， 其 百分比 值 完 全 就 被 忽略 了 。 例 如 ， 某 小 白 想 要 在 
页 面 播 入 一 个 <div>， 然 后 满 屏 显 示 背 景 图 ， 就 写 了 如 下 CSS: 


div { 
width: 100%;  /* 这 是 多 余 的 */ 


height: 106%;  ”/* 这 是 无 效 的 */ 
background: url(bg.jpg); 


然后 他 发 现 这 个 <div> 高 度 永远 是 09， 哪怕 其 父 级 <body> 塞 满 了 内 容 
也 是 如 此 。 事 实 上 ， 他 需要 如 下 设置 才 行 : 


html, body { 
height: 100%; 
} 
并 且 仅 仅 设置 <body> 也 是 不 行 的 ， 因 为 此 时 的 <body> 也 没有 具体 的 
高 度 值 : 


body { 
/* 子 元 素 height :100% 依 旧 无 效 */ 


只 要 经 过 一 定 的 实践 ， 我 们 都 会 发 现 对 于 普通 文档 流 中 的 元 素 ， 
百分比 高 度 值 要 想起 作用 ， 其 父 级 必须 有 一 个 可 以 生效 的 高 度 值 ! 但 
是 ， 怕 是 很 小 有 人 思考 过 这 样 一 个 问题 ， 为 何 父 级 没有 具体 高 度 值 的 
时 候 ，height :100% 会 无 效 ? 


1. 为 何 height :100% 无 效 


有 一 种 看 似 合理 的 说 法 : 如 果 父 元 素 height :auto 子 元 素 还 文 持 
height :1060%， 则 父 元 素 的 高 度 很 容易 陷入 死 循 环 ， 高 度 无 限 。 例 
如 ， 一 个 <div> 元 素 里 面 有 一 张 vertical-align 为 bottom 同 时 高 
度 为 192 像 素 的 图 片 ， 此 时 ， 该 <div> 高 度 就 是 192 像 素 ， 假 设 此 时 插 
入 一 个 子 元 素 ， 高 度 设 为 100%， 如 果 此 时 height :100% 可 以 计算 ， 
则 子 元 素 应 该 也 是 192 像 素 。 但 是 ， 父 元 素 height 值 是 auto， 电 不 是 
现在 高 度 要 从 原来 的 192 像 素 变 成 384 像 素 ， 然 后 height :100% 的 子 元 
素 高 度 又 要 变 成 384 像 素 ， 父 元 素 高 度 又 双 倍 ..….…... 死 循环 了 ! 


实际 上 ， 这 种 解释 是 错误 的 ， 大 家 千 万 别 被 误导 。 证 据 就 是 宽度 
也 存在 类 似 场景 ， 但 并 没有 死 循 环 。 例 如 ， 在 下 面 这 个 例子 中 ， 父 元 
素 采 用 “最 大 宽度 ”"， 然 后 有 一 个 jnline-block 子 元 素 宽 度 100%: 


<div class="box"> 


<img src="1.jpg"> 


<span class="text"> 红 色 背 景 是 父 级 </span> 
</div> 
.box { 


display: inline-block; 
white-space: nowrap; 
background-color: #cd0000; 


} 

‘text { 
display: inline-block; 
width: 100%; 
background-color: #34538b; 


color: #fff; 


} 


如 采 按 照 上 面 “高 度 死 循环 ”的 解释 ， 这 里 也 应 该 “宽度 死 循 环 "， 因 为 后 
面 的 jnline-block 元 素 按 照 我 们 的 理解 应 该 会 让 父 元 素 的 宽度 进 一 
步 变 大 。 但 实际 上 并 没有 ， 视 度 范围 可 能 超出 你 的 预期 ( 见 图 3-24) 
父 元 素 的 宽度 就 是 图 片 加 文字 内 容 的 宽度 之 和 。 


手动 输入 http://demo.cssworld.cn/3/2-10.php 或 者 扫 右 侧 的 二 维 码 。 


红色 背景 是 父 级 


图 3-24” 园 度 为 图 片 加 文字 内 容 的 宽度 之 和 


为 什么 会 这 样 表 现 呢 ? 


要 明白 其 中 的 原因 要 先 了 解 浏 览 器 泻 染 的 基本 原理 。 首 先 ， 先 下 
载 文 档 内 容 ， 加 载 头 部 的 样式 资源 (如 果 有 的 话 ) ， 然 后 按照 从 上 而 
下 、 自 外 而 内 的 顺序 渲染 DOM 内 容 。 套 用 本 例 就 是 ， 先 泻 染 父 元 素 ， 
后 泻 染 子 元 素 ， 是 有 先后 顺序 的 。 因 此 ， 当 泻 染 到 父 元 素 的 时 候 ， 子 
元 素 的 width :100% 并 没有 泻 染 ， 宽 度 区 是 图 片 加 文字 内 容 的 宽度 ; 
等 泻 染 到 文字 这 个 子 元 素 的 时 候 ， 父 元 素 宽度 已 经 固定 ， 此 时 的 
width:100% 束 是 已 经 固定 好 的 父 元 素 的 宽度 。 宽 度 不 够 怎么 办 ? 洲 
出 就 好 了 ，overflow 属 性 就 是 为 此 而 生 的 。 


同样 的 道理 ， 如 有 果 height 支 持 任意 元 素 100%， 也 是 不 会 死 循环 
的 。 和 宽度 类 似 ， 静 态 泻 染 ， 一 次 到 位 。 

那 问题 又 来 了 : 为 何 宽 度 支 持 ， 高 度 就 不 支持 呢 ? 规范 中 其 实 给 
出 了 管 案 。 如 果 包 含 块 的 高 度 没 有 显 式 指定 ( 即 高 度 由 内 容 决 定 ) ， 
并 且 该 元 素 不 是 绝对 定位 ， 则 计算 值 为 auto。 一 句 话 总 结 就 是 ， 因为 
解释 成 了 auto。 要 知道 ，auto 和 百分比 计算 ， 肯定 是 算 不 了 的 : 


'auto' * 100/100 = NaN 


但 是 ， 宽 度 的 解释 却 是 : 如 果 包 含 块 的 宽度 取决 于 该 元 素 的 宽度 ， 那 
么 产生 的 布局 在 CSS 2.1 中 是 未 定义 的 。 


还 记 不 记得 本 书 第 2 章 最 后 的 “未 定义 行为 " 吗 ? 这 里 的 宽度 布局 其 
实 也 是 “未 定义 行为 "， 也 就 古 规范 没有 明确 表示 该 上 怎样 ， 浏 览 右 可 以 
目 己 根据 理解 去 发 挥 。 好 在 根据 我 的 测试 ， 布 局 效果 在 各 个 浏览 右 下 
都 是 一 致 的 。 这 里 和 高 度 的 规范 定义 吕 区 别 明 显 了 ， 高 度 明 确 了 束 是 


auto， 高 度 百 分 比 计算 自然 无 果 ，width 却 没有 这 样 的 说 法 ， 因 此 ， 
就 按照 包含 块 真实 的 计算 值 作为 百分比 计算 的 基数 。 


2. 如 何 让 元 素 支 持 height :100% 效 果 


如 何 让 元 素 文 持 height :100% 效 果 ? 这 个 问题 的 答案 其 实 上 面 的 
规范 已 经 给 出 了 ， 即 有 两 种 方法 。 


(1) 设 定 显 式 的 高 度 值 。 这 个 没什么 好 说 的 ， 例 如 ， 设 置 
height:600px， 或 者 可 以 生殖 的 百分比 值 高 度 。 例 如 ， 我 们 比较 党 
见 的 : 


html, body { 
height: 100%; 
} 
(2) 使 用 绝对 定位 。 例 如 : 


div 
height: 100%; 


position: absolute; 


此 时 的 height :100% 束 会 有 计算 值 ， 即 使 祖先 元 素 的 height 计 
算 为 auto 也 是 如 此 。 需 要 注意 的 是 ， 绝 对 定位 元 素 的 百分比 计算 和 非 
绝对 定位 元 素 的 百分比 计算 是 有 区 别 的 ， 区 别 在 于 绝对 定位 的 宽 高 百 
分 比 计算 是 相对 于 padding box 的 ， 也 就 是 说 会 把 padding 大 小 值 计 算 
在 内 ， 但 是 ， 非 绝对 定位 元 素 则 是 相对 于 content box 计 算 的 。 


我 们 可 以 看 一 个 例子 ， 对 比 一 下 : 


.box { 
height: 160px; 
padding: 30px; 
box-sizing: border-box; 
background-color: #beceeb 


} 


.child { 
height: 100%; 
background-color: #cd0000; 
} 
.box { 
height: 160px; 
padding: 30px; 
box-sizing: border-box; 
background-color: #beceeb,; 
position: relative; 


} 

,Child { 
height: 100%; width: 100%; 
background-color: #cd0000; 
position: absolute; 


} 


可 以 看 到 ， 非 定位 元 素 的 宽 高 百分比 计算 不 会 将 padding 计 算 在 
内 ， 如 图 3-25 所 示 。 


如 有 果 对 图 3-25 所 示 的 结果 表示 质疑 ， 也 可 以 访问 
http://demo.cssworld.cn/ 3/2-11.php 或 者 扫 下 面 的 二 维 码 。 


高 度 100px 


高 度 160px 


图 3-25 ”绝对 定位 和 非 绝 对 定位 百分比 高 度 对 比 


我 对 这 两 种 height :100% 生 效 方法 的 评价 是 : 显 式 高 度 方法 中 规 
中 矩 ， 意 料 之 中 ;绝对 定位 方法 剑 走 侦 锋 ， 文 持 隐 式 高 度 计算 ， 给 
意外 之 喜 ， 但 本 身 脱离 文档 流 ， 使 其 仅 在 某 些 场景 有 四 两 拨 千 斤 的 效 
朵 ， 比 方 说 “图 片 左右 半 区 点 击 分别 上 一 张 图 下 一 张 图 效 灯 ”的 布局 


( 见 图 3-26) 。 


图 3-26 所 示 的 效果 有 专门 的 演示 页 面 ， 可 以 手动 输入 
http://demo.cssworld.cn/3/2-12.php 或 者 扫 下 面 的 二 维 码 。 


上 一 缚 < 


图 3-26 


图 片上 下 切 


图 布局 示意 


原理 很 商 单 ， 束 是 在 图 片 外 面包 一 层 具 有 "“ 包 右 性 ?同时 具有 和 定位 


特性 的 标签 。 例 如 : 


.box { 
display: inline-block; 


position: relative; 


此 时 ， 只 要 在 图 片上 覆盖 两 个 绝对 定位 ， 同 时 设 height :100%， 则 无 
论 图 片 多 高 ， 我 们 的 左右 半 区 都 能 自动 和 图 片 高 度 一 模 一 样 ， 无 须 任 


何 使 用 JavaScript 的 计算 。 


3.3 CSS min-width/max-width 和 min- 
height/max-height 二 三 事 


说 完了 width 和 height， 下 面 轮 人 到 min-width/max-width 和 
min-height/max-height 了， 它们 有 很 多 共性 。 比 方 说 ， 它 们 都 是 
与 尺寸 相关 的 ， 盒 尺寸 机 制 和 一 些 值 的 泻 染 规则 也 是 一 样 的 ， 因 此 ， 
这 部 分 内 容 这 里 就 不 性 述 了 ， 这 里 只 简单 讲 儿 点 minVmax- 
width/height 和 width/height 不 一 样 的 地 方 。 


3.3.1 ”为 流体 而 生 的 min-width/max-width 


在 CSS 世 界 中 ，min-width/max-width 出 现 的 场景 一 定 是 自 适 
应 布局 或 者 流体 布局 中 ， 因 为 ， 如 果 是 那 种 width/height 定 死 的 砖 
头 式 布局 ，min-width/max-width 就 没有 任何 出 现 的 价值 ， 因 为 它 
们 是 具有 边界 行为 的 属性 ， 所 以 没有 变化 自然 无 法 触发 ， 也 就 没有 使 
用 价值 。 


因此 ， 新 人 并 不 会 经 常 使 用 min-width/max-width， 只 有 随 着 
CSS 技 能 深入 ， 能 够 兼顾 还 原 性 的 同时 还 兼顾 扩展 性 和 适 配 性 之 后 ， 
min-width/max-width 才 会 用 得 越 来 越 多 ， 也 才能 真正 感受 到 IE7 浏 
览 器 就 支持 min/max-width 是 多 和 勾 好 的 一 件 事 情 。 


现代 桌面 显示 器 分 辨 率 越 来 越 大 ，960 像 素 网 页 设计 已 经 显得 有 些 
小 家 腰 玉 了 ， 但 随便 搞 一 个 大 尺寸 (如 1400 像 素 ) 的 网 页 宽度 也 不 合 


时 宜 ， 因 为 还 有 很 多 笔记 本 用 户 ， 此 时 ， 一 种 特定 区 间 内 的 自 适应 布 
局 方案 就 诞生 了 ， 网 页 宽度 在 1200~1400 像 素 自 适应 ， 既 满足 大 屏 的 
大 气 ， 又 满足 笔记 本 的 良好 显示 ， 此 时 ，min-widthVymax-width 就 
可 以 大 显 神威 了 : 


.Ccontainer { 
min-width: 1200px; 


max-width: 1400px; 


对 ， 无 须 width 设 置 ， 直 接 使 用 min-widthVymax-width。 


在 公众 号 的 热门 文章 中 ， 经 常会 有 图 片 ， 这 些 图 片 都 是 用 户 上 传 
产生 的 ， 因 此 尺寸 会 有 大 有 小 ， 为 了 避免 图 片 在 移动 问 展 示 过 大 影响 
体验 ， 管 第 会 有 下 面 的 max-width 限 制 : 


img { 
max-width: 100%; 


height: auto!important; 


height :auto 是 必需 的 ， 否 则 ， 如 果 原 始 图 片 有 设 定 height， 
max-width 生 效 的 时 候 ， 图 乒 束 会 被 水 平 压缩 。 强 制 height 为 auto 
可 以 确保 宽度 不 超出 的 同时 使 图 片 保 持原 来 的 比例 。 但 这 样 也 会 有 体 
验 上 的 问题 ， 那 就 是 在 加 载 时 图 片 占据 高 度 会 从 0 变 成 计算 高 度 ， 图 文 
会 有 明显 的 瀑布 式 下 落 。 


3.3.2 与 众 不 同 的 初始 值 


min-width/max-width 和 min-heigh/max-height 从 长 相 上 
看 明显 和 width/ height 是 一 个 家 族 的 ， 忌 以 为 属性 值 、 模 型 都 钙 一 


样 的 ， 但 是 有 一 个 地 方 束 搞 了 特殊 ， 那 就 是 初始 值 。width/height 
的 默认 值 是 auto,， 而 min-width/max-width 和 min-heigh/ max- 
height 的 初始 值 则 要 复杂 些 。 这 里 要 分 为 两 部 分 ,分别 是 max-* 系 列 
和 min-* 系 列 。max-width 和 max-height 的 初始 值 是 none，min- 
width 和 min-height 的 初始 值 是 .……. 


虽然 MDN 和 W3C 维 基 的 文档 上 都 显示 min-widthVymin-height 
的 初始 值 是 0， 但 是 ， 根 据 我 的 分 析 和 测试 ， 所 有 浏览 器 中 的 min- 
width/min-height 的 初始 值 都 是 auto。 证 据 如 下 : 


(1) min-wdith/height 值 为 auto 合 法 。 例 如 ， 设 置 : 


<body style="min-width:auto;"> 


结 采 所 有 浏 蜗 器 下 : 


document .body.style.minwidth; // 结果 是 auto 


说 明 min-* 支 持 auto 值 ， 同 样 ， 如 果 是 max-width:auto， 结 果 则 
是 ''， 进 一 步 证 明 min-width/height 值 为 auto 合 法 。 


(2) 数值 变化 无 动画 。 假 设 元 素 的 min-width/min-height 的 
初始 值 是 9， 那么 ， 当 我 们 设置 transition 过 渡 同 时 改变 了 min- 
width/min-height 值 ， 它 不 是 应 该 有 动画 效果 ? 结果 : 


.box { 
transition: min-height .3s; 


.box:hover { 
min-height: 300px; 


鼠标 经 过 .box 元素 ， 元 素 突然 变 高 ， 并 无 动画 效果 ， 但 是 ， 如 果 是 下 
面 这 样 的 设置 : 
.box { 


min-height: 090; 
transition: min-height .3s; 


.box:hover { 


min-height: 300px; 
} 


鼠标 经 过 ,box 元素 ，transition 动 画 效果 就 出 现 了 。 这 就 证 明了 ， 
min-height 的 初始 值 不 是 9， 既然 不 是 09， 那 束 应 该 是 所 有 浏览 器 都 
支持 的 auto。 


于 是 ， 得 到 如 下 结论 : min-width/min-height 的 初始 值 是 
auto，max-width/max-height 的 初始 值 是 none 。max- 
width/max-height 的 初始 值 为 何 是 none 而 不 是 auto 呢 ? 这 个 问题 
的 答案 其 实 与 下 面 小 节 的 内 容 有 关 。 我 们 不 妨 举 个 简单 的 例子 解释 一 
下 ， 已 知 父 元 素 宽 度 400 像 素 ， 子 元 素 设置 宽度 800 像 素 ， 假 如 说 max - 
width 初始 值 是 auto， 那 自然 使 用 和 width 一 样 的 解析 演 染 规则 ， 此 
时 max-width 的 计算 值 就 应 该 是 父 元 素 的 400 像 素 ， 此 时 ， 你 就 会 发 
现 ， 子 元 素 的 800 像 素 直 接 完 蛋 了 ， 因 为 max-width 会 禾 盖 width。 
于 是 ， 我 们 的 width 永远 不 能 设置 为 比 auto 计 算 值 更 大 的 宽度 值 了 ， 
这 显然 是 有 问题 的 ， 这 就 是 为 什么 max-width 初 始 值 是 none 的 原因 。 


3.3.3 超越 !important ， 超 越 最 大 


CSS 世 界 中 ,min-width/max-width 和 和 min-height/max- 
height 属 性 间 ， 以 及 与 width 和 height 之 间 有 一 套 相 互 履 盖 的 规 


则 。 这 套 规 则 用 一 名 比较 通俗 的 话 概括 就 是 : 超越 !important， 超 
越 最 大 。 络 竟 是 什么 意思 呢 ? 以 与 宽度 相关 的 属性 举例 说 明 。 


1. 超越 (important 


超越 !important 指 的 是 max-width 会 覆盖 width， 而 且 这 种 履 
盖 不 是 普通 的 履 盖 ， 是 超级 履 盖 ， 履 盖 到 什么 程度 呢 ? 大 家 应 该 都 知 
道 Css 世 界 中 的 Limnortant 的 权重 相当 高 在 业界 ， 往 往 会 
把 !important 的 权重 比 成 < 泰坦 尼克 ”， 比 直接 在 元 素 的 Style 属性 
中 设置 CSS 声 明 还 要 高 ,一般 用 在 CSS 禾 盖 JavaScript 设 置 上 。 但 是 ， 就 
是 这 么 厉害 的 !important， 直 接 被 max-width 一 个 浪头 就 拍 沉 了 。 
比方 说 ， 针 对 下 面 的 HTML 和 CSS 设 置 ， 图 片 最 后 呈现 的 宽度 是 多 少 
呢 ? 


<img src="1.jpg" style="width:480px!important;"> 


img { max-width: 256px; } 


答案 是 256px。style、!important 通 通 靠 边 站 ! 因为 max-width 
会 覆盖 width 8 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/3-1.php 或 者 扫 下 面 的 
二 维 码 。 结 果 如 图 3-27 所 示 。 


图 3-27 


2. 超越 最 大 


图 片 宽度 256 像 素 


超越 最 大 指 的 是 min-width 有 履 盖 max-width， 此 规则 发 生 在 
min-width 和 max-width 冲 突 的 时 候 。 例 如 ， 下 面 这 种 设置 : 


.Ccontainer { 
min-width: 1400px; 


max-width: 1200px; 


最 小 宽度 居然 比 最 大 宽度 设置 得 还 大 ， 此 时 ， 两 者 必定 是 你 死 我 
活 的 状态 。 究 竟 谁 死 呢 ? 遵循 “超越 最 大 ”规则 (注意 不 是 “后 来 居 上 ” 规 
则 ) ，min-width 活 下 来 ，max-width 被 忽略 ， 于 是 ，. container 
元 素 表现 为 至 少 1400 像 素 宽 。 


此 覆盖 规则 比较 好 理解 ， 就 不 专门 演示 了 。 
3.3.4 任意 高 度 元 素 的 展开 收 起 动画 技术 


“展开 收 起 ”效果 是 网 页 中 比较 常见 的 一 种 交互 形式 ， 通 常 的 做 法 
是 控制 display 属 性 值 在 none 和 其 他 值 之 间 切 换 ， 虽 说 功能 可 以 实 
现 ， 但 是 效果 上 略 显 生 硬 ， 所 以 就 会 有 这 样 的 需求 一 一 希望 元 素 展开 收 
起 时 能 有 明显 的 高 度 滑动 效果 。 传 统 实现 可 以 使 用 jQuery 的 
slideUp()/slideDown( ) 方 法 ， 但 是 ， 在 移动 端 ， 因 为 CSS3 动 画 文 
持 良 好 ， 所 以 移动 端的 JavaScript 框 架 都 是 没有 动画 模块 的 。 此 时 ， 使 
用 CSS 实 现 动画 就 成 了 最 佳 的 技术 选 型 。 


我 们 的 第 一 反应 就 是 使 用 height+overflow:hidden 实 现 。 但 
是 ， 很 多 时 候 ， 我 们 展开 的 元 素 内 容 是 动态 的 ， 换 句 话说 高 度 是 不 固 
定 的 ， 因 此 ，height 使 用 的 值 是 默认 的 auto， 应 该 都 知道 的 auto 是 
个 关键 字 值 ， 并 非 数值 ， 正 如 height :100% 的 100% 无 法 和 auto 相 计 
算 一 样 ， 从 9px 到 auto 也 是 无 法 计算 的 ， 因 此 无 法 形成 过 渡 或 动画 效 
果 o 


因此 ， 下 面 代 码 择 现 的 效果 也 是 生硬 地 展开 和 收 起 : 


.element { 
height: 0; 
overflow: hidden; 


transition: height .25s,; 


.element.active { 


height: auto; /* 没有 transition 效 果 ， 只 是 生硬 地 展开 */ 


难道 就 没有 什么 一 务 永 逸 的 实现 方法 吗 ? 有 ， 不 妨 试 试 max - 
height，CSS 代 码 如 下 : 


.element { 
max-height: 090; 
overflow: hidden; 
transition: max-height .25s; 


.element .active { 


max-height: 666px; ”/* 一 个 足够 大 的 最 大 高 度 值 */ 


} 


其 中 展开 后 的 max-height 值 ， 我 们 只 需要 设 定 为 保证 比 展 开 内 容 高 
度 大 的 值 就 可 以 ， 因 为 max-height 值 比 height 计 算 值 大 的 时 候 ， 元 
素 的 高 度 就 是 height 属 性 的 计算 高 度 ， 在 本 交互 中 ， 也 就 是 
height :auto 时 候 的 高 度 值 。 于 是 ， 一 个 高 度 不 定 的 任意 元 素 的 展开 
动画 效果 了 束 实 现 了 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/3-2.php 或 者 扫 右 侧 的 
二 维 码 。 


但 是 ， 使 用 此 方法 也 有 一 点 要 注意 ， 即 虽然 说 从 适用 范围 讲 ， 
max-height 值 越 大 使 用 场景 越 多 ， 但 是 ， 如 采 max-height 值 大 
大 ， 在 收 起 的 时 候 可 能 会 有 “效果 延迟 ”的 问题 ， 比 方 说 ， 我 们 展开 的 
元 素 高 度 是 100 像 素 ， 而 max-height 是 1000 像 素 ， 动 画 时 间 是 250 
ms， 假 设 我 们 动画 函数 是 线性 的 ， 则 前 225 ms 我 们 是 看 不 到 收 起 效果 
的 ， 因 为 nax-height 从 1000 像 素 到 100 像 素 变化 这 段 时 间 ， 元 素 不 会 
有 区 域 被 隐藏 ， 会 给 人 动画 延迟 225 ms 的 感觉 ， 相 信 这 不 是 你 想 看 到 
的 。 


因此 ， 我 个 人 建议 max-height 使 用 足够 安全 的 最 小 值 ， 这 样 ， 
收 起 时 即使 有 延迟 ， 也 会 因为 时 间 很 短 ， 很 难 被 用 户 察 觉 ， 并 不 会 影 
响 体验 。 


3.4 ”内 联 元 素 


如 有 果 纯 粹 套 CSS 规 范 的 话 ， 这 里 标题 应 该 是 “内 联 级 元 素 ” (inline- 
level elements) 。 但 在 本 书 中 “内 联 级 元 素 ” 全 部 简称 为 “内 联 元 素 "， 原 
因 在 第 3 章 开头 部 分 已 做 说 明 ， 不 再 发 述 。 


在 讲 元 素 的 内 外 盒子 的 时 候 ， 前 面 曾 提 到 过 “外 在 盒子 "有 
inline、block 和 run-in 三 种 水 平 。 其 中 run-in 鲜 有 人 使 用 ， 且 有 
淘汰 风险 ， 可 以 忽略 ; 剩 下 的 in1line 和 b1lock 几 乎 瓜分 了 剩 下 的 全 谨 
江山 ， 是 流体 布局 的 本 质 所 在 。 从 作用 上 来 讲 ， 块 级 负责 结构 ， 内 联 
负责 内 容 。CSS 世 界 是 为 图 文 展 示 而 设计 的 。 所 谓 图 文 ， 指 图 片 和 文 
字 ， 是 最 典型 的 内 联 元 素 。 所 以 ， 在 CSS 世 界 中 ， 内 联 元 素 是 最 为 重要 
的 ， 涉 及 的 CSS 属 性 也 非常 之 多 ， 这 些 CSS 属 性 往往 具有 继承 特性 ， 混 
合 在 一 起 会 导致 CSS 解 析 规 则 非常 复杂 。 这 就 是 内 联 元 素 的 解析 比 块 级 
元 素 解 析 更 难 理解 的 原因 一 一 其 是 多 个 属性 共同 作用 的 结果 ， 需 要 对 
内 联 元 素 特性 ， 内 联 盒 模型 以 及 当前 CSS 属 性 都 了 解 ， 才 能 明白 其 中 的 
原因 。 


不 要 担心 ， 从 这 里 开始 ， 我 们 会 慢 慢 揭 开 内 联 世 弄 的 层 层 面纱 。 
3.4.1 ”哪些 元 素 是 内 联 元 素 

我 们 先 来 了 解 如 何 辨别 内 联 元 素 。 
1. 从 定义 看 


首先 要 明白 这 一 点 :“ 内 联 元 素 ”* 的 “内 联 ” 特 指 “ 外 在 盒子 ”， 
和 “display 为 nline 的 元 素 ”* 不 是 一 个 概念 ! inline-block 和 


inline-table 都 是 “内 联 元 素 ”， 因 为 它们 的 “外 在 盒子 ”都 是 内 联合 
子 。 自 然 display :inline 的 元 素 也 是 “内 联 元 素 ”"， 那 么 ， 
<button> 按 钮 元 素 是 内 联 元 素 ， 因 为 其 display 默 认 值 是 jnline- 
block; <img> 图 厂 元 到 也 是 内 联 元 素 ， 因 为 其 display 默 认 值 是 


inline 等 。 


2. 从 表现 看 


束 行 为 表现 来 看 , “内 联 元 素 ” 的 典型 特征 束 是 可 以 和 文字 在 一 行 
显示 。 因 此 ， 文 字 有 是 内 联 元 素 ， 铬 片 是 内 联 元 素 ， 按 钮 是 内 联 元 系 ， 
输入 框 、 下 拉 框 等 原生 表单 控件 也 走 内 联 元 陛 。 


下 面 有 一 个 疑问 : 浮动 元 素 狐 似 也 是 可 以 和 文字 在 一 个 水 平 上 显 
示 的 ， 是 不 是 浮动 元 素 也 是 内 联 级 别 的 呢 ? 不 是 的 。 实 际 上 ， 浮 动 元 
素 和 后 面 的 文字 并 不 在 一 行 显示 ， 浮 动 元 素 已 经 在 文档 流 之 外 了 。 证 
据 就 是 ， 当 后 面 文字 足够 多 的 时 候 ， 文 字 并 不 是 在 浮动 元 素 的 下 面 ， 

是 继续 在 后 面 。 这 就 说 明 ， 浮 动 元 素 和 后 面 文字 不 在 一 行 ， 只 是 它 
们 恰好 站 在 了 一 起 而 已 。 真 相 是 ， 浮 动 元 素 会 生成 “ 块 盒子 *"， 这 就 是 
后 话 了 。 

3.4.2 ”内 联 世界 深入 的 基础 一 一 内 联 盒 模型 

本 节 的 内 容 可 谓 CSS 进 阶 标志 知识 点 ， 是 入 门 CSS 开 发 人 员 和 熟练 
CSS 开 发 人 员 之 间 的 分 水 岭 ， 是 需要 反复 拿 来 看 拿 来 体味 的 。 这 里 介绍 
的 “内 联 盒 模型 ”是 简易 版 ， 但 是 已 经 足够 ， 如 果 大 家 对 完整 的 概念 和 
名 词 感 兴 趣 ， 可 以 阅读 规范 文档 。 


这 里 有 个 <em>em</em> 标签 。</p> 


看 似 普通 ， 实 际 上 包含 了 很 多 术语 和 概念 ， 或 者 换 种 通俗 的 说 
法 ， 包 含 了 很 多 种 盒子 。 我 归结 为 下 面 这 些 盒子 。 


(1) 内 容 区 域 (content area) 。 内 容 区 域 指 一 种 围绕 文字 看 不 见 
的 盒 于 ， 其 大 小 仅 受 字符 本 吴 特 性 控制 ， 本 质 上 是 一 个 字符 盒子 
(character box) ; 但 是 有 些 元 素 ， 如 图 片 这 样 的 替换 元 素 ， 其 内 容 显 
然 不 是 文字 ， 不 存在 字符 盒子 之 类 的 ， 因 此 ， 对 于 这 些 元 素 ， 内 容 区 
域 可 以 看 成 元 素 目 身 。 


定义 上 说 内 容 区 域 是 “看 不 见 的 ”， 这 对 理解 “内 容 区 域 " 征 不 利 的 ， 
好 在 根据 我 多 年 的 理解 与 实践 ， 我 们 可 以 把 文本 选中 的 育 景色 区 域 作 
为 内 容 区 域 ， 例 如 ， 如 图 3-28 所 示 。 


T 普 朝 的 文字 ， 这 生 有 个 <em>em</em>》 标 登 。 


图 3-28 内容 区 域 示 意 


这 对 于 解释 各 种 内 联 相 关 的 行为 都 非常 可 行 ， 文 本 选中 区 本 质 上 
就 等 同 于 基本 盒 尺 寸 中 的 content box， 都 是 content， 语 义 上 也 说 得 
通 。 

实际 上 上， 内容 区 域 并 没有 明确 的 定义 ， 所 以 将 其 理解 为 em 盒 (em- 


box， 可 看 成 是 中 文字 符 占据 的 1 em 高 度 区 域 ) 也 是 可 以 的 ， 但 是 在 本 
书 中 ， 为 了 方便 冲 示 和 讲解 ， 将 其 全 部 理解 为 文本 选中 的 区 域 。 


在 IE 和 Firefox 浏 览 器 下 ， 文 字 的 选中 背景 总 能 准确 反映 内 容 区 域 
范围 ， 但 是 Chrome 浏 览 器 下 ，: :selection 范 围 并 不 总 是 准确 的 ， 例 


如 ， 和 图 片 混 排 或 者 有 垂直 padding 的 时 候 ， 范 围 会 明显 过 大 ， 这 一 
点 需要 注意 。 后 面 行 高 等 章节 会 利用 此 选中 背景 帮助 我 们 理解 。 


内 容 区 域 在 解释 内 联 元 素 的 各 种 行为 表现 时 ， 出 镜 率 出 奇 地 高 ， 
建议 大 家 这 里 多 多 留意 。 


(2) 内 联 盒子 (inline box) 。“ 内 联 盒子 ”不 会 让 内 容 成 块 显示 ， 
而 古 排 成 一 行 ， 这 里 的 “内 联 盒 子 ” 实 际 指 的 就 古 元 到 的 “外 在 盒 于 ”， 用 
来 决定 元 素 是 内 联 还 十 块 级 。 该 使 于 又 可 以 细 分 为 “内 联合 于 ”和 “匿名 
内 联 盒子 ”两 类 : 


baweseos eeeeeeeed eer sss 


如 果 外 部 含 内 联 标 签 (<span>、<a> 和 和 <em> 等) ， 则 属于 “内 联 
盒子 ”( 实 线 杠 标注) ; 如 果 是 个 光秃秃 的 文字 ， 则 属于 “匿名 内 联 盒 
子 ” (虚线 框 标注 ) 。 


需要 注意 的 是 ， 并 不 是 所 有 光秃秃 的 文字 都 是 “匿名 内 联 盒子 ”， 
其 还 有 可 能 是 “匿名 块 级 盒子 "， 关 键 要 看 前 后 的 标签 是 内 联 还 是 块 
级 。 


(3) 行 框 盒子 (ine box) 。 例 如 : 


< p> | 必 二 一介 音 通 此 ， 这 里 有 个 < em>em< /em> 标签 。 < /p> 


每 一 行 就 是 一 个 “ 行 框 盒 子 ”《 实 线 框 标注 ) ， 每 个 “ 行 框 盒子 ”又 是 由 
个 一 个 “内 联 盒子 ?组 成 的 。 


(4) 包含 盒子 (containing box) 。 例 如 : 


月 个 < em>em< /em> 人 怀 僧 "< /p> 


<p> 标 侈 束 是 一 个 “包含 盒子 ”( 实 线 框 标注 ) ， 此 盒子 由 一 行 一 行 
的 “ 行 框 金 子 ” 组 成 。 


需要 补充 说 明 一 点 ， 在 CSS 规 范 中 ， 并 没有 “包含 盒子 ”的 说 法 ， 更 
准确 的 称呼 应 该 是 “包含 块 ”(containing block) 。 这 里 之 所 以 把 它 称 为 
盒子 ， 一 是 为 了 与 其 他 盒子 名 称 统一 ， 二 是 称 为 盒子 更 形象 、 更 容易 
理解 。 


3.4.3 ”幽灵 空白 节点 


“幽灵 空 晶 市 点 ”是 内 联 盒 模型 中 非常 重要 的 一 个 概念 ， 具 体 指 的 
征 : 在 HTML5 文 档 声 明 中 ， 内 联 元 聚 的 所 有 解析 和 渔 染 表现 束 如 同 每 
个 行 框 盒子 的 前 面 有 一 个 “ 空 日 三 扩 ”一 样 。 这 个 “ 空 日 节操 ”水 远 表明 ， 
不 占据 任何 宽度 ， 看 不 见 也 无 法 通过 脚本 获取 ， 就 好 像 幽 灵 一 样 ， 但 
又 确 确 实 实 地 存在 ， 表 现 如 同文 本 市 点 一 样 ， 因 此 ， 我 称 之 为 “幽灵 空 
I 


注意 ， 这 里 有 一 个 前 提 ， 文 档 声明 必须 是 HTML5 文 档 声明 
(HTML 代 码 如 下 ) ， 如 果 还 是 很 多 年 前 的 老 声明 ， 则 不 存在 “幽灵 空 
Tm 


<!ldoctype html> 
<html> 


我 们 可 以 举 一 个 最 简单 的 例子 证 明 “ 幽 灵 空 白 节 点 ”确实 存在 ， 
CSS 和 HTML 代 码 如 下 : 


div { 
background-color: #cd0000; 


span { 


display: inline-block; 


<div><span></span></div> 


结果 ， 此 <div> 的 高 度 并 不 是 0， 而 是 如 图 3-29 所 示 有 高 度 。 


1984 x 18 
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图 3-29 高度 不 为 6 证 明 幽 灵 空 白 节 点 的 存在 〈 截 和 目 Chrome 浏 览 器 ) 


这 着 实 很 奇怪 ， 内 部 的 <span> 元 素 的 宽 高 明明 都 是 9， 标签 之 间 
也 没有 换行 符 之 类 的 嫌疑 ， 怎 么 <div> 的 高 度 会 是 图 3-29 中 所 示 的 18 像 
素 呢 ? 


作案 的 就 古 这 里 的 “幽灵 空 日 市 点”， 如 来 我 们 认为 在 <span> 元 到 
的 前 面 还 有 一 个 宽度 为 9 的 空白 字符 ， 是 不 是 切 束 解释 得 通 呢 ? 


当然 ， 为 何 高 度 是 18 像 素 这 里 三 言 两 语 是 解释 不 清 的 ， 可 以 看 后 
面 对 line-height 和 vertical-align 的 深入 讲解 ， 这 里 只 是 为 了 
证 明 “ 幽 灵 至 日 节点 ”确实 是 存在 的 。 


里 然 说 “幽灵 空 日 太太 ”十 我 目 己 根据 CSS 的 特性 表现 起 的 一 个 非常 
形象 的 名 字 ， 但 其 绝 不 是 空中 楼 阁 、 信 口 胡 诡 的 。 规 范 中 实际 上 对 这 
个 “幽灵 至 日 世 点 ?是 有 提 及 的 , “幽灵 至 日 斑点 ?实际 上 也 是 一 个 盒子 ， 
不 过 是 个 假想 使 ， 名 叫 “strut*"， 中 文 直译 为 “ 文 柱 ”， 是 一 个 存在 于 每 
个 “ 行 框 金子 ”前 面 ， 同 时 具有 该 元 素 的 字体 和 行 高 属性 的 0 宽度 的 内 联 
使。 规范 中 的 原文 如 下 : 


Each line box starts with a zero-width inline box with the element’s font and | 


line height properties. We call that imaginary box a “strut”. 


明日 “幽灵 空白 市 点 ”的 存在 古 理 解 后 续 很 多 内 联 元 素 为 何 会 这 么 
表现 的 基础 。 


[1] “外 在 盒子 "除了 inline- block， 还 有 run-in， 但 Chrome 已 
经 放弃 对 run-in 的 支持 有 一 段 时 间 了 ， 因 此 ， 本 书 不 对 其 做 分 析 。 


第 4 章 ”使 尺 寸 四 大 家 族 


使 尺 寸 中 的 4 个 盒子 content box 、padding box 、border box 和 margin 
box 分 别 对 应 CSS 世 界 中 的 content、padding、border 和 margin 属 
性 ， 我 把 这 4 个 属性 称 为 “使 太 二 四 大 家 族 ”， 下 面 我 们 一 个 一 个 揭 开 “四 
大 家 族 ” 鲜 为 人 知 的 一 面 。 


4.1 深入 理解 content 
4.1.1 content 与 替换 元 素 


1. 什么 是 蔡 换 元 素 


蔡 换 元 素 (replaced element) 可 以 说 是 CSS 世 界 中 的 男 外 一 个 派 
系 o 


根据 “外 在 盒子 ?是 内 联 还 是 块 级 我 们 可 以 把 元 素 分 为 内 联 元 素 和 
块 级 元 素 ， 而 根据 是 否 具 有 可 赫 换 内 容 ， 我 们 也 可 以 把 元 系 分 为 敬 换 
元 素 和 非 蔡 换 元 系 。 那 什么 是 蔡 换 元 素 呢 ? 


巷 换 元 素 ， 顾 名 忆 义 ， 内 容 可 以 被 蕉 换 。 举 个 典型 的 例子 : 


如 果 我 们 把 上 面 的 1.jpg 换 成 2.,jpg， 是 不 是 图 片 就 会 蔡 换 了 ? 


这 种 通过 修改 某 个 属性 值 呈 现 的 内 容 就 可 以 被 替换 的 元 素 就 称 
为 “ 符 换 元 素 "”。 因 此 ，<jimg>、<object>、<Vvideo>、<iframe> 或 
者 表单 元 素 <textarea> 和 <input> 都 是 典型 的 替换 元 素 。 


玲 换 元 素 除 了 内 容 可 车 换 这 一 特性 以 外 ， 还 有 以 下 一 些 特性 。 


(1) 内 容 的 外 观 不 受 页 面 上 的 CSS 的 影响 。 用 专业 的 话 讲 就 是 在 
样式 表现 在 CSS 作 用 域 之 外 。 如 何 更 改 灯 换 元 素 本 身 的 外 观 ? 需要 类 似 
appearance 属 性 ， 或 者 浏览 器 目 身 暴露 的 一 些 样式 接口 ， 例 如 ::- 
ms-check{} 可 以 更 改 高 版 本 下 浏览 器 下 单 复 选 框 的 内 间距 、 背 景 
等 样式 ， 但 是 直接 input [type='checkbox']f} 却 无 法 更 改 内 间 
距 、 背 景色 等 样式 。 


(2) 有 自己 的 尺寸 。 在 web 中 ， 很 多 替换 元 素 在 没有 明确 尺寸 设 
定 的 情况 下 ， 其 默认 的 尺寸 〈 不 包括 边框 ) 是 300 像 素 x150 像 素 ， 如 
<vVideo>、<iframe> 或 者 <canvas> 等 ， 也 有 人 少 部 分 替换 元 素 为 0 像 
素 ， 如 <img> 图 片 ， 而 表单 元 素 的 蔡 换 元 素 的 尺寸 则 和 浏 咒 器 有 关 ， 
没有 明显 的 规律 。 


(3) 在 很 多 CSS 属 性 上 有 自己 的 一 套 表 现 规 则 。 比 较 具 有 代表 性 
的 就 是 vertical-align 属 性 ， 对 于 替换 元 素 和 非 奉 换 元 素 ， 
vertical-align 属 性 值 的 解释 是 不 一 样 的 。 比 方 说 vertical- 
align 的 默认 值 的 baseline， 很 简单 的 属性 值 ， 基 线 之 意 ， 被 定义 为 
字符 x 的 下 边缘 ， 在 西方 语言 体系 里 近乎 常识 ， 几 乎 无 人 不 知 ， 但 是 到 
了 替换 元 素 那 里 就 不 适用 了 。 为 什么 呢 ? 因 为 蔡 换 元 素 的 内 容 往往 不 


可 能 含有 字符 x， 于 是 替换 元 素 的 基线 就 被 硬 生生 定 义 成 了 元 素 的 下 边 


下 面 提 个 简单 问题 ， 下 拉 框 <select> 是 不 是 替换 元 素 ? 答案 : 是 


的 。 


我 们 可 以 对 照 一 下 " 莓 换 元 聚 ?的 一 些 特点 : 首先 ， 内 容 可 符 换 ， 
例如 我 们 设置 multip1e 属 性 ， 下 拉 直 接 变 成 了 展开 的 直选 多 选 模式 ; 
其 次 ， 基 本 样式 外 部 CSS 很 难 改变 ， 最 后 ， 它 有 日 己 的 尺寸 ， 基 线 也 是 
下 边缘 等 。 


2. 替换 元 素 的 默认 display 值 


所 有 的 殖 换 元 素 都 是 内 联 水 平 元 素 ， 也 束 是 殖 换 元 素 和 替换 元 
素 、 替 换 元 素 和 文字 都 是 可 以 在 一 行 显 示 的 。 但 是 ， 和 替换 元 素 默认 的 
display 值 却 是 不 一 样 的 ， 见 表 4-1 。 


表 4-1 各 个 蔡 换 元 素 的 默认 display 属 性 值 


加 


<iframe> inline inline inline 
<video> inline inline inline 


<select> inline-block inline-block inline-block 


加 加 
range|file <input> inline-block inline-block inline-block 


和 
inline-block inline-block inline-block 
| | 


通过 对 比 发 现 ， 正 浏览 器 和 Chrome 浏 览 器 的 返回 值 都 是 一 样 的 ， 
但 是 Firefox 浏 览 器 在 <textarea> 和 绝 大 多 数 类 型 的 <ijnput> 元 素 上 
却 是 返回 的 inLine 而 不 是 in1ine-block， 这 其 实 是 一 个 很 奇怪 也 很 
有 意思 的 现象 。 为 什么 说 奇怪 呢 ? 我 们 都 知道 下 面 两 种 按钮 元 素 的 表 
示 方 法 尺寸 长 相 是 一 模 一 样 的 : 


<input type="button" value=" 按 钮 "> 
<button type="button"> 按 钮 </button> 


但 是 在 Firefox 下， 前 者 的 display 属 性 默认 值 是 ijnline， 后 者 却 是 
inline-block， 很 目 然 会 奇怪 明明 一 个 模子 里 出 来 的 ， 怎 么 会 有 这 
个 区 别 呢 ? 


实际 上 ， 如 采 我 们 深入 探究 束 会 发 现 ， 似 乎 Firefox 浏 硕大 在 等 换 
元 素 的 内 联 表 现 这 一 块 还 是 有 些 目 己 的 想法 的 。 


首先 回答 一 下 这 个 疑问 : <input> 和 <button> 按 钮 的 区 别 在 什 
么 地 方 ? 区 别 在 于 两 种 按钮 默认 的 white-space 值 不 一 样 ， 前 者 是 
pre， 后 者 是 normal， 上 所 表示 出 来 的 ”现象 差异 就 是 当 按 钮 文字 
足够 多 的 时 候 ，<input> 按 钮 不 会 自动 换行 ，<button> 按 钮 则 会 。 


当然 ， 这 并 不 是 Firefox 浏 览 器 下 两 种 按钮 默认 display 值 不 一 样 
的 原因 ， 那 究竟 是 什么 原因 呢 ? 我 仔细 对 比 了 一 下 ， 发 现 没 有 规律 可 
言 ， 原 因 芍 怕 只 有 浏览 器 厂商 自己 才 知 道 了 。 当 然 ， 抛 出 此 问题 的 目 
的 不 是 得 出 这 里 略 显 甫 人 衍 的 答案 ， 而 是 为 了 引出 下 面 的 重要 内 容 ， 也 
就 是 :我们 没有 必要 深究 为 什么 一 个 是 ijnline 一 个 是 inline- 
block， 因 为 对 于 替换 元 素 而 言 ， 这 是 没有 意义 的 。 为 什么 这 么 说 
呢 ? 替换 元 素 有 很 多 表现 规则 和 非 蔡 换 元 素 不 一 样 ， 其 中 之 一 是 宽度 
和 高 度 的 尺寸 计算 规则 ， 人 简单 描述 一 下 就 是 ， 替 换 元 素 的 display 是 
in1line、block 和 inline-block 中 的 任意 一 个 ， 其 尺寸 计算 规则 都 是 一 样 
的 。 


3. 替换 元 素 的 矿 寸 计算 规则 


我 个 人 将 替换 元 素 的 尺寸 从 内 而 外 分 为 3 类 : 固有 尺寸 、HIML 尺 
寸 和 CSS 尺 寸 。 


(1) 固有 斥 才 指 的 是 蔡 换 内 容 原本 的 太 寸 。 例 如 ， 图 片 、 视 频 作 
为 一 个 独立 文件 存在 的 时 候 ， 都 是 有 着 自己 的 宽度 和 高 度 的 。 这 个 宽 
度 和 高 度 的 大 小 殊 是 这 里 的 “固有 尺寸 "。 对 于 表单 类 替换 元 素 , “固有 


尺寸 "可 以 理解 为 “不 加 修饰 的 默认 尺寸 ”。 比 方 说 ， 你 在 空白 页 面 写 上 
<input>， 此 时 的 尺寸 就 可 以 看 成 是 <input> 元 素 的 “固有 尺寸 *。 这 
就 是 输入 框 、 下 拉 框 这 些 表 单元 素 默认 的 font - 
size/padding/margin 等 属性 全 部 使 用 px 作为 单位 的 原因 ， 因 为 这 
样 可 以 保证 这 些 元 素 的 “固有 尺寸 ”是 固定 大 小 ， 不 会 受 外 界 CSS 的 影 
啊 。 


(2) HIML 尺 寸 这 个 概念 略微 抽象 ， 我 们 不 妨 将 其 想象 成 水 煮 蛋 
里 面 的 那 一 层 日 色 的 腊 ， 里 面 是 “固有 尺寸 ”这 个 蛋黄 蛋 日 ， 外 面 
是 “CSS 尺 寸 ” 这 个 和 蛋 膏 。“HTML 尺 寸 " 只 能 通过 HTML 原 生 属 性 改变 ， 
这 些 HTML 原 生 属 性 包括 <img> 的 width 和 height 属 性 、<input> 的 
size 属 性 、<textarea> 的 cols 和 rows 属 性 等 。 


<img width="300" height="100"> 
<input type="file" size="30"> 


<textarea cols="20" rows="5></textarea> 


(3) CSS 尺 寸 特 指 可 以 通过 CSS 的 width 和 height 或 者 max- 
width/min-width 和 max-height/min-height 设 置 的 尺寸 ， 对 应 
盒 尺 寸 中 的 content box 。 


可 以 影响 车 换 元 素 尺寸 的 3 层 结构 如 图 4-1 所 示 。 这 3 层 结 构 的 计算 
规则 具体 如 下 。 


Fr-------” 


图 4-1 ”替换 元 素 的 3 层 尺 寸 结 构 示 意 


。 如 采 没 有 CSS 扩 十 和 HTML 扩 寸 ， 则 使 用 固有 斥 才 作为 最 终 的 宽 
高 。 例 如 ， 下 面 的 HTML 人 代码: 


<img src="1.jpg"> 


假设 1. jpg 这 张 图 片 原 尺寸 是 256 x 192， 则 在 页 面 中 此 图 所 呈现 
的 宽 高 就 是 256 像 素 x192 像 素 。 


。 如 果 没 有 CSS 尺 寸 , 则 使 用 HIML 尺 寸 作为 最 终 的 宽 高 。 仍 以 图 片 
举例 : 


<img src="1.jpg" width="128" height="96"> 


我 们 通过 HTML 属 性 width 和 height 限 定 了 图 片 的 HTML 尺 寸 ， 
因此 ， 最 终 图 片 所 呈现 的 宽 高 就 是 128 像 素 x96 像 素 。 


。 如果 有 CSS 尺 寸 ， 则 最 终 尺寸 由 CSS 属 性 决定 。 我 们 继续 上 面 的 例 
子 : 


img { width: 200px; height: 150px; } 


<img src="1.jpg" width="128" height="96"> 


此 时 国有 尺寸 、HTML 尺 寸 和 CSS 尺 寸 同时 存在 ， 起 作用 的 是 CSS 
属性 限定 的 尺寸 ， 因 此 ， 最 终 图 乒 所 呈现 的 宽 高 就 是 200 像 素 x150 像 
素 o 


。 如 果 “ 回 有 太 才 ”含有 固有 的 视 高 比例 ， 同 时 仅 设置 了 宽度 或 仅 设 
置 了 高 度 ， 则 元 素 依然 按照 回 有 的 宽 高 比例 显示 。 我 们 还 是 拿 图 
瞩 举 例 ， 例 如 ， 下 面 的 CSS 和 和 HTML 代码: 


img { width: 200px; } 


<img src="1.jpg"> 


虽然 CSS 中 仅仅 设置 了 width， 但 图 片 这 种 替换 元 素 的 资源 本 身 具 
有 特定 的 宽 高 比例 ， 因 此 ，height 也 会 等 比例 计算 。 所 以 ， 最 终 图 片 
所 呈现 的 宽 高 就 是 200 像 素 x150 像 素 (150 = 200 x192/256) 。 


如 果 本 例子 仅 设置 height :150px， 最 后 的 结果 也 是 这 样子 。 


。 如 果 上 面 的 条 件 都 不 符合 ， 则 最 终 宽 度 表现 为 300 像 素 ， 高 度 为 
150 像 素 ， 宽 高 比 2:1。 例 如 : 


<video></video> 


在 所 有 现代 浏 贤 器 下 的 尺寸 表现 都 是 300 像 素 x150 像 取 。 


。 门 联 蔡 换 元 素 和 块 级 蔡 换 元 陛 使 用 上 面 同 一 僚 矿 二 计算 规则 。 例 
如 : 


img { display: block; } 
虽然 图 片 此 时 变 成 了 块 级 ,但 是 尺寸 规则 还 是 和 内 联 状态 下 一 
致 ， 因 此 ， 图 片 呈现 的 宽 高 还 是 256 像 素 x192 像 素 。 这 也 是 为 何 图 片 以 


及 其 他 表单 类 替换 元 素 设置 display :block 宽 度 却 没有 100% 容 器 的 
原因 。 


如 有 果 单 看 规则 ， 似 乎 面面俱到 ， 无 懈 可 击 。 但 是 ， 实 际 上 ， 意 外 
还 是 发 生 了 ， 这 个 意外 就 是 最 常用 at 。 如 采 任 何 斥 才 都 没 
有 ， 则 元 素 应 该 是 300 像 素 x150 像 素 ， 这 条 规则 <video>、<canvas> 和 
<iframe> 这 些 元 素 都 符合 ， i “Wl bh 


这 段 HIML 表 示 一 个 没有 替换 内 容 也 没有 尺寸 设 定 的 裸露 的 <img> 
元 素 。 按 照 规 范 尺 十 应 该 是 300 像 素 x 150 像 素 ， 结 采 不 仅 不 是 这 个 尺 
寸 ， 而 且 各 个 浏览 右 下 的 尺 才 还 不 一 样 。 正 浏 贤 右 下 是 28x30， 如 图 4-2 
所 示 。Chrome 浏 帘 絮 下 是 0x0， 如 图 4-3 所 示 。Firefox 浏 唤 屁 下 显示 的 
是 0x22， 如 图 4-4 所 示 。 


图 4-2 “IE 浏览 器 图 片 默 认 尺 十 


图 4-3” Chrome 浏览 器 图 片 默 认 尺 寸 


图 4-4 Firefox 浏 览 器 图 片 默认 尺寸 


其 实 尺 寸 不 一 样 不 打 紧 ， 因 为 我 们 平时 使 用 都 会 设置 尺寸 ， 不 可 
能 像 这 样 放任 不 管 ， 但 是 ， 如 果 表 现 型 也 不 一 样 ， 那 惑 盯 烦 了 。 我 们 
从 一 个 党 用 功能 的 前 端 小 技巧 说 起 。 

Web 开 发 的 时 候 ， 为 了 提高 加 载 性 能 以 及 节约 带 视 费 用 ， 首 屏 以 下 
的 图 片 束 会 通过 深 屏 加 载 的 方式 异步 加 载 ， 然 后 ， 这 个 即将 被 异 步 加 
载 的 图 片 为 了 布局 稳健 、 体 验 民 好 ， 往 往 会 使 用 一 张 透明 的 图 片 占 
位 。 例 如 : 


<img src="transparent.png"> 


实际 上 ， 这 个 透明 的 占 位 图 片 也 是 多 余 的 资产， 我 们 直接 : 


然后 配合 下 面 的 CSS 可 以 实现 一 样 的 效果 : 


img { visibility: hidden; } 


img[src] { visibility: visible; } 


注意 ， 这 里 的 <img> 直 接 没有 src 属 性 ， 再 强调 一 遍 ， 是 直接 没 
有 ， 不 是 src=""，src="" 在 很 多 浏 贤 絮 下 依然 会 有 请 求 ， 而 且 请 求 
的 是 当前 页 面 数据 。 当 图 片 的 src 属 性 缺 省 的 时 候 ， 图 片 不 会 有 任何 请 
求 ， 是 最 高 效 的 实现 方式 。 


理论 再 次 无 懈 可 击 ， 然 而 ， 正 如 之 前 提 到 的 ，“ 似 乎 Firefox 浏 览 器 
在 三 换 元 素 的 内 联 和 表现 这 一 块 还 是 有 些 目 己 的 想法 的 ”。 对 于 Firefox 训 
览 右 ，src 缺 省 的 <img> 不 是 蔡 换 元 素 ， 而 是 一 个 普通 的 内 联 元 素 ， 所 
以 使 用 的 束 不 是 蕉 换 元 取 的 尺寸 规则 ， 而 十 类 似 <span> 的 内 联 元 取 尺 
才 规 则 ， 视 高 会 无 效 。 因 此 : 


img { width: 200px; height: 150px; } 
<img> 


在 太 和 Chrome 浏 览 絮 下 部 按 照 预 期 图 片 尺寸 200 像 素 x150 像 素 ， 但 
古 ，Firefox 济 唤 占 却 纹 丝 不 动 ， 依 然 古 默认 图 片 人 寸 ， 这 束 比 较 尴 座 
了 ， 好 在 要 修复 此 兼容 性 问题 很 简单 ， 只 需 直 接 设置 : 


img { display: inline-block; } 


就 理解 为 <span> 标 签 设 置 dijsplay:inline-block 后 可 以 设置 
宽 高 承 可 以 了 。 这 个 针对 Firefox 浏 览 器 的 修复 既 有 效 ， 又 对 其 他 浏览 


图 片 表现 没有 任何 影响 ， 因 此 ， 我 建议 在 CSS 重 置 的 时 候 加 上 下 面 
X 行 : 


授 下 来 ， 我 们 继续 深入 蔡 换 元 素 的 尺寸 规则 。 


Xt 


CSS 世 界 中 的 替换 元 素 的 固有 尺寸 有 一 个 很 重要 的 特性 ， 那 就 
是 “我 们 是 无 法 改变 这 个 蔡 换 元 素 内 容 的 固有 尺寸 的 ” 。 


我 们 平 音 打交道 的 图 片 的 尺寸 规则 是 “默认 的 宽 高 设置 会 覆盖 回 有 
尺寸 "， 因 此 ， 我 们 可 能 会 误 认 为 我 们 的 宽 高 设置 修改 的 是 图 片 的 固有 
尺寸 ,实际 上 并 不 是 。 要 证 明 这 一 观点 ， 我 们 可 以 借助 非 奉 换 元 素 
的 : :before 或 : :after 伪 元 素 。 例 如 ， 如 果 有 下 面 的 代码 : 


div:before { 
content: url(1.jpg); 


display: block; 
width: 200px; height: 200px; 


此 时 : :before 伪 元 素 呈 现 的 图 片 的 宽 高 是 多 少 ? 


很 多 人 会 按照 经 验 认 为 是 200 像 素 x200 像 素 ， 非 也 ! 实际 上 ， 这 里 
的 独 斤 大 二 是 1. jpg 这 张 几 片 的 原始 斥 才 大 小 256 像 素 x192 像 素 ， 
width 和 height 属 性 都 家 直接 无 视 了 。 这 融 是 我 上 面 所 说 的 ， 在 CSS 
世界 中 ， 图 片 资 源 的 固有 尺寸 是 无 法 改变 的 ! 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-1.php 或 者 扫 右 侧 的 
二 维 码 。 


可 以 看 到 图 片 是 按照 原始 尺寸 展示 的 (如 图 4-5 所 示 ) ， 并 不 是 
CSS 设 定 的 200 像 素 x200 像 素 ，200 像 素 仅 仅 是 设 定 了 content box 尺 寸 ， 
对 content 生 成 图 片 资 源 并 没有 任何 影响 。 


我 们 再 回 到 <ijmg> 元 素 ， 既 然 图 片 的 固定 尺寸 不 受 CSS 宽 高 控制 ， 
那 为 何 我 们 设 定 width 和 height 会 影响 图 片 的 尺寸 呢 ? 


我 就 不 卖 天 子 了 ， 那 是 因为 图 片 中 的 content 蔡 换 内 容 默 认 的 适 
配方 式 是 填充 (fil1) ， 也 就 是 外 部 设 定 的 尺寸 多 大 ， 我 束 填 满 、 跟 
着 一 样 大 。 换 句 话 说 ， 尺 寸 变 化 的 本 质 并 不 是 改变 固有 尺寸 ， 而 是 采 
用 了 填充 作为 适 配 HTML 尺 寸 和 CSS 尺 寸 的 方式 ， 且 在 CSS3 之 前 ， 此 
适 配 方式 是 不 能 修改 的 。 


在 CSS3 新 世界 中 ，<img> 和 其 他 一 些 蔡 换 元 素 的 替换 内 容 的 适 配 
方式 可 以 通过 object -fit 属 性 修改 了 。 例 如 ，<img> 元 素 的 默认 声 
明 是 object-fit:fil1， 如 有 果 我 们 设置 object-fit:none， 则 我 


们 图 片 的 尺寸 就 完全 不 受 控 制 ， 表 现 会 和 非 奉 换 元 素 : :before 生 成 的 
图 片 尺寸 类 似 ， 如 果 我 们 设置 object-fit:contain， 则 图 片 会 以 保 
持 比 例 图 片 ， 尽 可 能 利用 HTML 尺 寸 但 又 不 会 超出 的 方式 显示 ， 有 些 类 
似 于 background-size:contain 的 呈现 原理 ， 如 果 此 时 我 们 设 定 
<img> 元 素 的 width 和 height 都 是 200 像 素 ， 则 会 呈现 图 4-6 所 示 的 自 
动 垂 直 居 中 效果 。 


图 4-5 ” content 生 成 的 图 片 宽 高 设置 无 效 


图 4-6 object-fit:contain 下 的 图 片 效 果 


object-fit 还 有 其 他 一 些 属性 值 ， 但 本 书 不 会 展开 介绍 CSS3 内 
容 ， 因 此 点 到 为 止 ， 有 兴趣 的 读者 可 以 读 我 的 博客 文章 : 


http://www.zhangxinxu.com/wordpress/?p=4676 ° 


4. 替换 元 素 和 非 蔡 换 元 素 的 距离 有 多 远 


图 片 可 以 说 古 最 典型 最 第 用 的 奉 换 元 素 了 ， 因 此 ， 本 广 依 然 以 图 
片 为 代表 来 深入 蔡 换 元 聚 的 “内 心 世界 ”。 


仙 侠 小 说 世界 中 有 正道 和 魔道 ， 看 似 势 不 两 立 ， 但 其 实 并 无 本 质 
差别 ， 稍 不 留神 可 能 束 会 变 成 魔道 中 八 。CSS 世 界 中 的 蔡 换 元 素 和 非 奉 
换 元 素 看 上 去 也 是 两 个 对 立 的 派别 ， 立 场 清晰 ， 区 分 明显 ， 老 死 不 相 
往来 的 感觉 ， 但是， 一 旦 深入 研究 我 们 就 会 发 现 ， 两 者 之 间 的 距离 要 
比 我 们 所 有 人 想象 得 都 要 近 ! 


观 护 1 蔡 换 元 素 和 非 蔡 换 元 素 之 间 只 隔 了 一 个 src 属 性 ! 


由 于 我 们 平时 使 用 图 片 肯定 都 会 使 用 src 属 性 ， 所 以 难免 会 思维 定 
式 ， 认 为 <img> 等 同 于 图 片 ， 实 际 上 完全 不 是 的 。 如 有 果 我 们 把 src 属 性 
去 掉 ，<img> 其 实 就 是 一 个 和 <span> 类 似 的 普通 的 内 联 标 签 ， 也 就 是 
成 了 一 个 非 奉 换 元 素 。 


非常 有 想法 的 Firefox 浏 览 器 很 好 地 证 实 了 这 一 点 。 例 如 ， 对 于 以 
下 CSS 和 HTML 代 码 ， 最 后 图 片 宽 度 是 多 少 ? 


img { 
display: block; 


outline: 1px solid; 


按照 奉 换 元 素 的 矿 二 规则， 宽度 应 该 是 0， 但 实际 上 ， 在 Firefox 浏 
览 右 下 ， 最 终 的 宽度 是 100% 目 适应 父 容 器 的 可 用 宽度 的 。 其 表现 和 普 


通 的 <span> 类 似 ， 已 经 完全 不 是 替换 元 素 了 。 大 家 应 该 都 知道 ， 
<Span> 标 签 设置 width 和 height 是 无 效 的 ， 所 以 大 家 应 该 明白 为 何 
Firefox 浏 览 右 下 <img> 设 置 width 和 height 不 起 作用 了 吧 。 


Firefox 浏 蜗 右 的 案例 很 好 地 证 明了 “如 果 图 片 没有 车 换 内 容 ， 图 片 
束 古 一 个 普通 的 内 联 标 答 ”。 


Chrome 浏 览 器 其 实 也 有 类 似 的 表现 ， 只 是 需要 特定 的 条 件 触 发 而 
已 ， 这 个 触发 条 件 就 是 需要 有 不 为 空 的 alt 属 性 值 。 例 如 : 


<img alt=" 任 意 值 "> 


此 时 ，Chrome 这 个 <img> 宽 度 也 是 100% 容 器 。 假 设 我 们 容器 宽度 470 
像素 ， 则 效 采 就 是 图 4-7 所 示 的 样子 。 完 全 就 是 非 蔡 换 元 素 的 表现 吧 。 


但 是 ， 如 果真 是 这 样 ， 那 为 何 下 浏 响 器 没有 src 属 性 还 是 完全 的 巷 
换 元 素 表 现 呢 ?原因 整 在 于 下 浏览 副 中 有 个 默认 的 占 位 替换 内 容 ， 当 
src 属 性 缺失 的 时 候 ， 会 使 用 这 个 默认 的 占 位 内 容 ， 这 也 古 还 浏 咒 器 下 
默认 <img> 尺 寸 是 28x30 而 不 像 Chrome 浏 览 器 那样 为 0x0 的 原因 所 在 。 
在 高 版 本 的 正 浏览 右 下 ， 这 个 占 位 的 奉 换 内 容 似乎 做 了 透明 处 理 ， 但 
征 ， 在 原生 的 正 8 浏览 右 下 ， 这 个 占 位 内 容 却 全 然 么 露 了 ， 见 图 4-8。 


图 4-7 ”容器 禄 度 470 像 素 的 效果 


一 


图 4-8 ”下 浏览 器 <img> 占 位 内 容 


大 家 仔细 观察 会 发 现 此 占 位 内 容 中 那个 图 片 的 小 图 标 是 完整 的 ， 
不 是 图 片 src 不 合法 出 现 的 破裂 小 图 标 或 者 带 又 号 的 图 标 ， 需 要 注意 区 
别 ， 别 混 消 了 。 


另外 一 个 可 以 很 好 证 明 * 蕉 换 元 素 和 非 奉 换 元 素 区 别 殴 在 于 src 属 
性 ”的 点 是 “基于 伪 元 素 的 图 斤 内 容 生成 技术 ”。 用 一 句 更 易 懂 的 话 描述 
就 是 ， 我 们 可 以 对 <img> 元 素 使 用 : :before 和: :after 伪 元 素 进行 
内 容 生成 以 及 样式 构建 ， 但 是 这 种 方法 文 持 是 有 限制 的 。 首 先是 兼容 
性 问题 ， 根 据 我 的 测试 ， 目 前 Chrome 和 Firefox 等 浏览 器 支持 ， 但 正 浏 
多 絮 不 支持 ， 其 次 ， 要 想 让 Chrome 或 Firefox 等 浏览 絮 生 效 ， 还 有 其 他 
一 些 需要 注意 的 技术 点 。 


(1) 不 能 有 src 属 性 (证 明 观 点 的 关键 所 在 ) ; 
(2) 不 能 使 用 content 属 性 生成 图 片 (针对 Chrome) ; 
(3) 需要 有 alt 属 性 并 有 值 (针对 Chrome) ; 


(4) Firefox 下 : :before 伪 元 素 的 content 值 会 被 无 
视 ，: :after 无 此 问题 ， 应 该 与 Firefox 自 己 占用 了 : :before 伪 元 素 
的 content 属 性 有 关 。 


虽然 “基于 伪 元 妈 的 图 片 内 容 生成 技术 ”并 不 属于 实用 技术 ， 但 
和 是， 实际 网 页 开发 的 时 候 ， 会 有 一 些 场景 必须 使 用 <img> 标 答 ， 此 
时 ， 这 些 隐 向 的 技术 往往 束 会 有 神 迹 表现 。 我 这 里 举 个 小 例子 抛 夸 引 
玉 一 下 ， 上 一 人 小节 提 到 使 用 缺 省 src 的 <img> 元 素 实 现 滚屏 加 载 效 果 ， 
但 是 ， 束 有 可 能 存在 这 样 一 个 体验 问题 ， 如 末 我 们 的 JavaScript 加 载 比 


较 慢 ， 我 们 的 页 面 吏 很 有 可 能 出 现 一 块 一 块 日 色 的 图 片区 域 ， 纯 日 色 

的 ， 没 有 任何 信息 ， 用 户 完 全 不 知道 这 里 的 内 容 是 什么 。 虽然 alt 属 性 

可 以 提供 描述 信息 ， 但 由 于 视觉 效果 不 好 ， 被 隐藏 掉 了 。 此 时 ， 我 们 
总 不 免 畅 想 : 要 是 在 图 片 还 没 加 载 时 就 把 alt 信 息 圣 现 出 来 该 多 好 啊 。 


喜 你 可 以 美梦 成 真 ! 办 法 就 是 使 用 这 里 的 “基于 伪 元 素 的 图 片 内 
罕 生 成 技术 ， 


在 Chrome 或 Firefox 浏 咒 器 下 访问 http://demo.cssworld.cn/4/ 1- 
2.php。 进 入 此 演示 页 面 ， 我 们 鼠标 经 过 中 间 的 色 块 区 域 的 时 候 会 
现 ， 有 一 个 市 有 文字 信息 的 半 透 明 黑 色 条 目 出 现 了 ， 如 图 4-9 所 示 。 


R 


图 4-9 ” alt 信息 美美 地 显示 


此 时 ， 图 片 src 没 有 ， 因 此 ，: :before 和 : :after 可 以 生效 ， 我 
们 就 可 以 把 alt 属 性 值 通 过 content 属 性 呈现 出 来 ， 核 心 CSS 代 码 如 
下 : 


img::after { 
/* 生成 alt 信 息 */ 
content: attr(alt); 
/* 尺寸 和 定位 */ 


position: absolute; bottom: 0 


width: 100% 

background-color: rgba(0,o0,0,.5); 
transform: translateY(100%); 

/* 来 点 过 渡 动 画 效果 */ 

transition: transform .2s; 


img:hover::after { 
/* alt 信 息 显 示 */ 
transform: translateY(0); 


下 面 是 此 技术 最 有 意思 的 部 分 。 当 我 们 点 击 按钮 给 图 片 添加 一 个 
src 地 址 时 ， 图 片 从 普通 元 素 变 成 奉 换 元 素 ， 原 本 都 还 文 持 
的 : :before 和 : :after 此 时 全 部 无 效 ， 此 时 再 hover 图 片 ， 是 不 会 
有 任何 信息 出 现 的 ( 见 图 4-10); 。 于 是 就 非常 巧妙 地 增强 了 图 片 还 没 加 
载 时 的 信息 展示 体验 。 


此 村 无 信息 土 现 
人 


图 4-10 ”src 属 性 存在 时 候 :before/ :after 失 效 


细 细 体味 会 发 现 ， 这 一 体验 增强 实现 非常 巧妙 地 利用 了 替换 元 素 
的 各 种 特性 表现 ， 并 且 在 HTML 层 面 并 没有 任何 其 他 代码 或 内 容 的 畏 
助 ， 可 谓 是 非常 高 性 价 比 的 技术 实现 ， 大 家 不 妨 在 自己 的 项 目 中 小 试 
一 下 。 


观点 2: 替换 元 素 和 非 替 换 元 素 之 间 只 隔 了 一 个 CSS content 属 
性 ! 


替换 元 素 之 所 以 为 替换 元 素 ， 束 是 因为 其 内 容 可 替换 ， 而 这 个 内 
容 就 是 nargin、border、padding 和 content 这 4 个 盒子 中 的 
content box， 对 应 的 CSS 属 性 是 content， 所 以 ， 从 理论 层面 讲 ， 
content 属 性 决定 了 是 替换 元 素 还 是 非 奉 换 元 素 。 


理论 太 虚 ， 我 们 还 是 看 一 些 有 趣 的 真实 案例 吧 。 在 开始 之 前 ， 我 
们 需要 感谢 Chrome 浏 览 器 ，Chrome 浏 览 器 的 泻 染 表现 帮助 我 们 更 好 地 
理解 了 蔡 换 元 素 。 什 么 表现 呢 ? 就 是 在 Chrome 浏 哆 器 下 ， 所 有 的 元 素 
都 支持 content 属 性 ， 而 其 他 浏览 器 仅 在 : :before/: :after 伪 元 素 
中 才 有 文 持 。 因 此 ， 下 面 的 所 有 和 案例， 请 在 Chrome、Safari、Opera 等 
浏览 絮 下 查看 。 


前 面 已 经 证 明了 ， 没 有 src 属 性 的 <img> 是 非 蕉 换 元 素 ， 但 是 ， 如 
果 我 们 此 时 使 用 content 属 性 给 它 生成 一 张 图 片 呢 ? 


img { content: url(1.jpg); } 
<img> 


结 末 和 下 面 HTIML 的 视觉 效果 一 模 一 样 : 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-3.php 或 者 扫 下 面 的 
二 维 码 。 结 果 图 厂 都 正常 显示 了 ， 如 图 4-11 所 示 ， 且 各 种 表现 都 人 符合 蔡 
换 元 素 ， 如 尺寸 规则 ， 或 者 不 支持 : :before/: :after 伪 元 素 等 。 


1. 常规 实现 


<img src="1.jpg"”> 


图 4-11 content 


2. content 届 性 实现 


<img> 


属性 直接 生成 


img:not([src]) { 
content: url(1.jpg); 


图 片 演示 截 


图 


男 外 还 有 一 点 很 有 意思 ， 如 果 图 片 原来 是 有 src 地 址 的 ， 我 们 也 是 
可 以 使 用 content 属 性 把 图 片 内 容 给 置换 掉 的 ， 于 是 ， 我 们 就 能 轻松 


实现 hover 图 片 变 成 男 外 一 张 图 片 的 效 琳 。 例 如 : 


<img src="laugh.png"> 
img:hover { 


content: url(laugh-tear.png); 
} 


实例 可 以 手动 输入 http://demo.cssworld.cn/4/1-4.php 或 者 扫 下 面 的 二 
维 码 访问 。 该 实例 中 ， 我 们 鼠标 经 过 笑脸 ， 笑 脸 会 邦 出 眼泪 ( 见 图 4- 
12) ， 束 是 通过 CSS 的 content 属 性 直接 替换 <img> 的 替换 内 容 实现 
的 。 要 是 放 在 以 前 ， 我 们 只 能 借助 background -image 或 者 两 个 
<img> 元 素 显 隐 和 控制 实现 。 


图 4-12 ”鼠标 经 过 变 成 笑 泪 图 片 


然后 ， 还 有 一 点 有 必要 说 明 一 下 ，content 属 性 改变 的 仅仅 是 视 
般 呈 现 ， 当 我 们 以 右键 或 其 他 形式 保存 这 张 图 片 的 时 候 ， 所 体 存 的 还 
是 原来 src 对 应 的 图 片 。 


不 仅 如 此 ， 使 用 content 属 性 ， 我 们 还 可 以 让 普通 标签 元 素 变 成 
玲 换 元 素 。 举 个 例子 ， 官 网 的 标志 往往 都 会 使 用 <h1> 标 签 ， 里 面 会 有 
网 站 名 称 和 标志 图 片 使 用 至 景 图 ， 类 似 下 面 的 代码 : 


<h1i>《CSS 世 界 》</h1> 
hi { 


width: 180px; 

height: 36px; 

background: url(1logo.png); 
/* 隐藏 文字 */ 

text-indent: -999px; 


下 面 展示 一 个 创新 的 方法 ， 大 家 可 以 在 移动 端 试 试 。 还 是 一 样 的 
HTML 人 代码， 但 是 CSS 代 码 微调 了 一 下 : 


hi { 
content: url(logo.png); 


没 销 ， 只 要 一 行 CSS 残 可 以 实现 我 们 想 要 的 效 有 末了。 为 了 证 明 我 不 
是 在 打 许 语 ， 我 特意 制作 了 演示 页 面 ， 可 以 手动 输入 
http://demo.cssworld.cn/4/1-5.php 或 者 扫 下 面 的 二 维 码 。 戏 果 如 图 4-13 所 
示 ， 可 以 看 到 没有 文字 ， 只 有 图 片 。 


《Css 世界 》 


图 4-13 ”content 轻 松 实现 文字 变 图 片 


我 们 简单 分 析 一 下 : 传统 CSS 代 码 的 <h1> 是 一 个 普通 元 素 ， 因 此 
需要 设 定 尺 寸 隐藏 文字 ;， 但是， 后面 使 用 content 属 性 实现 ，<h1> 分 
分 钟 束 变 成 了 替换 元 素 ， 文 字 目 动 彼 蕉 换 ， 同 时 尺寸 规则 就 十 车 换 元 
素 的 尺寸 规则 ， 完 美 适 应 原始 图 片 大 小 。 


此 外 ， 虽 然 视 觉 上 文字 被 替换 了 ， 但 是 屏幕 阅读 设备 阅读 的 还 是 
文字 内 容 ， 搜 索引 擎 SEO 抓 取 的 还 是 原始 的 文本 信息 ， 因 此 ， 对 页 面 
的 可 访问 性 等 没有 任何 有 影响。 看 起 来 这 是 一 个 完美 的 文子 换 图 显示 方 
案 , 但 还 是 有 一 些 局 限 。 前 文 也 说 到 了 ， 替 换 元 素 的 固有 尺寸 是 无 法 
设置 的 ， 如 今 在 移动 端 retina 屏 幕 几乎 是 标 配 ， 为 了 图 片 显 示 细 腻 ， 往 
往 真实 图 片 尺寸 是 显示 图 片 尺 寸 的 两 倍 。 于 是 问题 束 来 了 ， 使 用 


content 生 成 图 片 ， 我 们 是 无 法 设 草 图片 的 尺寸 的 ， 只 能 迫不得已 使 
用 一 倍 图 ， 然 后 导致 图 片 看 上 去 有 点 儿 模 糊 。 


所 以 ， 要 想 在 移动 端 使 用 该 技术 ， 建 议 使 用 SVG 矢 量 图 片 。 例 
如 : 


hi { 
content: url(logo.svg); 


好 了 ， 最 后 和 标题 再 呼应 下 ， 奉 换 元 系 和 非 蔡 换 元 素 的 距离 有 多 


远 ? 就 是 src 或 content 那 一 点 。 
5. content 与 替换 元 素 关 系 剖 析 


从 前 一 节 大 家 一 定 早 就 看 出 content 属 性 和 替换 元 素 之 间 有 着 非 
党 微妙 的 联系 了 。 实 际 上 ， 在 CSS 世 界 中 ， 我 们 把 content 属 性 生成 
的 对 象 称 为 “匿名 替换 元 素 ”(anonymous replaced element) 。 看 到 没 ， 
直接 丈 “ 蔡 换 元 素 ” 叫 起 来 了 ， 可 见 ， 它 们 之 间 的 联系 并 不 是 微妙 ， 而 
是 赤裸 裸 。 


content 属 性 生成 的 内 容 都 是 称 换 元 系 ? 没 销 ， 融 是 车 换 元 素 ! 


也 正 是 这 个 原因 ，content 属 性 生成 的 内 容 和 普通 元 素 内 容 才 会 
有 很 多 不 同 的 特性 表现 。 我 这 里 举 几 个 人 简单 的 例子 。 


(1) 我 们 使 用 content 生 成 的 文本 是 无 法 选中 、 无 法 复制 的 ， 好 
像 设 置 了 user - select:none 声 明 一 般 ， 但 是 普通 元 素 的 文本 却 可 以 被 轻 
松 选 中 。 同 时 ，content 生 成 的 文本 无 法 被 屏幕 阅读 设备 读 取 ， 也 无 


法 被 搜索 引 警 抓 取 ， 因 此 ， 于 万 不 要 上 自以为是 地 把 重要 的 文本 信息 使 
用 content 属 性 生成 ， 因 为 这 对 可 访问 性 和 SEO 都 很 不 友好 ， 
content 属 性 只 能 用 来 生成 一 些 无 天 紧要 的 内 容 ， 如 装饰 性 图 形 或 者 
序号 之 类 ; 同样 ， 也 不 要 担心 原本 重要 的 文字 信息 会 被 content 替 
换 ， 蔡 换 的 仅仅 是 视觉 层 。 


这 里 有 人 可 能 会 反驳 : _ content 内容 无 法 复制 也 可 能 是 伪 元 素 的 
原因 ， 而 不 是 奉 换 元 素 的 原因 。 要 回答 这 个 问题 ， 我 们 可 以 将 其 与 同 
样 是 替换 元 素 的 : :first-letter 对 比 一 下 。 在 了 下 和 Firefox 浏 览 器 
下 ，: :first-letter 伪 元 素 内 容 都 是 可 以 被 选中 的 ， 但 
是 : :before/::after 内 容 却 无 法 选中 。 由 此 可 见 ， 文 学 无 法 选中 多 
半 是 content 的 原因 ， 而 非 伪 元 素 。 


(2) 不 能 左右 :empty 伪 类 。:empty 是 一 个 CSS 选 择 器 ， 当 元 素 
里 面 无 内 容 的 时 候 进 行 匹配 。 例 如 ， 下 面 的 HTML 和 CSS 代 三 : 


<div> 有 内 容 </div> 
<div></div> 
div { padding: 10px border: 10px solid #cd0000; } 


div:empty { border-style: dashed; } 


前 面 一 个 <div> 是 实 线 边 框 ， 而 后 面 的 ， 因 为 里 面 无 内 容 ， 所 以 融 是 
虚线 边框 。 


接 下 来 ， 我 们 使 用 content 属 性 给 <div> 生 成 一 些 文字 ， 例 如 : 


div::after { content: " 伪 元 素 生 成 内 容 ") } 


结果 看 上 去 好 像 <div> 里 面 出 现 了 文字 内 容 ， 实 际 上 ， 还 是 当成 
了 :empty， 最 终 效 果 如 图 4-14 所 示 ， 是 一 个 虚 框 。 手 动 输入 
http://demo.cssworld.cn/4/1-6.php 或 者 扫 下 面 的 二 维 码 。 


图 4-14 content 无 法 影响 :empty 选 择 器 
pty 


(3) content 动 态 生 成 值 无 法 获取 。content 是 一 个 非常 强大 
的 CSS 属 性 ， 其 中 一 个 强大 之 处 就 是 计数 器 效果 ， 可 以 自动 累加 数值 ， 
例如 ， 图 4-15 中 的 数字 3 就 是 content 动 态 生 成 的 (具体 参考 4.1.2 节 计 
数 器 部 分 ) 。 


下 面 中 国 十 大 冰淇淋 你 吃 过 几 个 ? 
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你 总 共 选 择 了 3 款 冰 淇 淋 ! 


图 4-15 content 属性 动态 生成 数值 
核心 CSS 代 码 如 下 : 


.total::after { 
content: counter(icecreanm); 
} 


我 们 是 无 法 获得 此 时 content 对 应 的 具体 数值 是 多 少 的 ， 一 点 儿 
办 法 都 没有 。getCcomputedSty1le 方 法 可 以 获得 伪 元 素 的 计算 样式 。 
但 是 ， 得 到 的 只 是 纯粹 的 content 在 CSS 文 件 中 的 属性 值 。 例 如 ， 这 
里 : 


var dom = document.querySelector(".total"), 
window.getcomputedstyle(dom ，"::after").content;  // 结果 


是 : "counter (icecream)" 


结 是 I 


counter(icecream)"， 而 不 是 数值 3。 


当然 ，content 生 成 内 容 还 有 其 他 很 多 和 普通 元 素 不 一 样 的 特 
性 ， 束 不 一 一 介绍 了 ， 我 们 不 妨 把 更 多 注意 力 放 在 下 一 下 内容 上 ， 即 


与 content 属 性 相关 的 实用 技术 。 


4.1.2 ” content 内 容 生 成 技术 
在 实际 项 目 中 ，content 属 性 几乎 都 是 用 在 : :before/: :after 


这 两 个 伪 元 素 中 ， 因 此 , “content 内 容 生成 技术 ”有 时 候 也 称 
为 “: :before/: :after 伪 元 素 技术 ”。 


提前 说 明 一 下 ， 因 为 本 书目 标 浏览 器 是 IE8 及 以 上 版 本 浏览 器 ， 而 
IE8 浏 览 器 仅 支 持 单 冒号 的 伪 元 素 ， 所 以 下 面 内 容 代 码 示意 部 分 全 部 使 
用 单 冒号 


1. content 辅 助 元 素 生 成 


此 应 用 的 核心 点 不 在 于 content 生 成 的 内 容 ， 而 是 伪 元 素 本 身 。 
通 单 ， 我 们 会 把 content 的 属性 值 设置 为 至 字符 串 ， 像 这 样 : 


,element :before { 
content: ''; 


Cp 


只 要 


三 | 
征 元 


空 字 符 串 就 可 以 ， 我 曾 多 次 见 到 有 人 设置 为 content:'.,.'， 这 
没有 必要 的 。 


El 
全 
完全 


然后 ， 利 用 其 他 CSS 代 码 来 生成 辅助 元 素 ， 或 实现 图 形 效 果 ， 或 实 
现 特 定 布局 。 与 使 用 显 式 的 HTML 标 签 元 素 相 比 ， 这 样 做 的 好 处 是 
HTML 代 码 会 显得 更 加 干净 和 精简 。 


图 形 效 琳 实 现 跟 着 设 计 走 ， 不 具有 普 适 性 ， 这 里 不 介绍 。 重 点 说 
说 辅助 元 素 在 布局 中 的 应 用 。 其 中 ， 最 第 见 的 应 用 之 一 束 古 清除 浮动 


之 来 的 影响: 


.Cclear:after { 


content: ''; 
display: table; /* 也 可 以 是 'block' */ 
clear: both; 


} 


男 外 一 个 很 具有 代表 性 的 应 用 束 是 辅助 实现 “两 端 对 齐 ” 以 及 “ 王 直 
居中 /上 边 绿 /下 边 绿 对齐” 效果。 我 们 不 妨 来 看 一 个 二 合 一 的 实例 ， 手 
动 输入 http://demo.cssworld.cn/4/1-7.php 或 者 扫 右 侧 的 二 维 码 。 此 实例 演 
示 是 一 个 目 动 等 视 布 局 且 底 部 对 齐 的 柱状 图 ， 默 认 展 示 了 4 项 ， 如 图 4- 
16 所 示 。 当 我 们 动态 插入 更 多 柱子 元 素 ， 布 局 依然 智能 均 分 匀 余 至 
间 ， 活 脱 脱 一 个 弹性 盒子 布局 ， 效 果 如 图 4-17 所 示 ， 而 且 此 方法 所 有 浏 


[ 


大 口 己 P< 
宙 和 三 全 菲 容 ， 


图 4-16 4 个 柱 形 图 效果 


图 4-17 ”10 个 柱 形 图 效 呈 
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核心 CSS 代 码 如 下 : 


.box { 
width: 256px; height: 256px; 
/* 两 端 对 齐 关 键 */ 
text-align: justify 


.box:before { 
content: "",; 
display: inline-block; 
height: 100%; 


.box:after { 
content: ""; 
display: inline-block; 
width: 100%; 


} 

,bar { 
display: inline-block; 
width: 20px; 

} 


对 应 的 HTML 代 码 如 下 : 


<div class="box"><i class="bar"></i> 
<i class="bar"></i> 
<i class="bar"></i> 


<i class="bar"></i> 


至 于 实现 原理 ，: before 伪 元 素 用 于 辅助 实现 底 对 齐 ， 深 入 内 容 
可 参见 5.3 节 ; :after 伪 元 素 用 于 辅助 实现 两 端 对 齐 ， 深 入 内 容 可 参见 
8.6 节 ， 这 里 不 展开 讲解 


这 一 方法 的 最 大 好 处 是 足够 兼容 ， 如 采 想 要 兼容 正 7 浏 响 胡 ， 直 接 
使 用 标签 元 素 即 可 ， 但 这 种 方法 也 有 不 足 之 处 ， 就 是 HTML 代 码 需要 注 
意 有 些 地 方 不 能 换行 或 者 空格 ， 有 些 地 方 则 必须 要 换行 或 者 有 空格 ， 

这 在 多 人 协作 的 时 候 束 容易 出 问题 。 例 如 ， 开 发 人 员 喜 欢 编辑 船 的 
HTML 格 式 化 功能 ， 然 后 标签 目 动 换行 ， 于 是 样式 束 会 出 现 仿 痊 ， 所 
以 ， 一定 记 得 在 HTML 代 码 中 写 上 明确 的 注释 一 一 “这 里 千 万 不 能 换 
行 "”， 或 者 类 似 这 种 。 


2. content 字 符 内 容 生 成 


content 字 符 内 容 生 成 加 是 直接 写 入 字符 内 容 ， 中 英文 都 可 以 ， 
比较 常见 的 应 用 就 是 配合 @ofont -face 规 则 实现 图 标 字体 效果 。 例 


如 ， 下 面 这 个 例子 : 


@font-face { 
font-family: "myico"; 
src: Url("/fonts/4/myico.eot"); 
src: url("/fonts/4/myico.eot#iefix") format("embedded- 
opentype"), 
urli("/fonts/4/myico.ttf") format("truetype"), 
urli("/fonts/4/myico.woff") format("woff"); 


.icon-home:before { 
font-size: 64px; 
font-family: myico; 


[1 I 
了 


Content : 系 


<span class="icon-home"></span> 


此 时 ， 页 面 显 示 的 可 能 束 不 是 一 个 “家 * 字 ， 而 是 一 个 图 标 ， 如 图 4-18 所 
示 。 上 面 的 例子 有 对 应 的 实例 页 面 ， 手 动 输入 
http://demo.cssworld.cn/4/1-8.php 或 者 扫 下 面 的 二 维 码 。 


图 4-18 “家 ” 字 显 示 成 了 一 个 房屋 图 标 


另外 一 个 值得 介绍 的 点 束 是 ， 除 常规 字符 之 外 ， 我 们 还 可 以 插入 
Unicode 字 符 ， 比 较 经 典 的 就 是 插入 换行 符 来 实现 某 些 布局 或 者 效果 。 
核心 CSS 代 码 如 下 : 


:after { 
content: '\A'， 
white-space: pre; 


} 


很 多 人 可 能 会 问 : 这 个 '\A' 是 什么 ?'\A' 其 实 指 的 是 换行 符 中 的 
LF 字符 ， 其 Unicode 编 码 是 0090A， 在 CSS 的 content 属 性 中 则 直接 写 
作 '\A'; 换行 符 除 了 LE 字符 还 有 CR 字符 ， 其 Unicode 编 码 是 000D， 在 
CSS 的 content 属 性 中 则 直接 写作 '\D'。CR 字 符 和 LF 字符 分 别 指 回 车 
(CR) 和 换行 (LF) ，content 字 符 生 成 强大 之 处 就 在 于 不 仅 普 通 字 
符 随 便 插 ，Unicode 字 符 也 不 在 话 下 。 


那 它 具 体 有 什么 作用 呢 ? 很 显然 ， 作 用 就 古 换 行 。 那 换行 义 有 什 
么 用 呢 ? 确实 ， 很 多 时 候 ， 换 行 效果 看 上 去 没什么 特别 之 处 ， 我 在 
HIML 中 弄 个 <br> 标 等 不 是 照样 有 一 样 的 效 采 ? 但 是 content 字 符 生 
成 在 某 些 场景 下 真 的 可 以 大 放 有 异彩， 我 们 不 妨 看 下 面 这 个 配合 CSS3 
animation 用 来 实现 字符 动画 效 末 的 例子 。 


我 们 动态 加 载 页 面 内 容 的 时 候 ， 经 常会 使 用 “正在 加 载 中 ...” 这 几 个 
字 ， 基 本 上 ， 后 面 的 3 个 点 都 是 静态 的 。 静 态 的 问题 在 于 ， 如 采 网 络 不 
流畅 ， 加 载 时 间 比 较 长 ， 就 会 给 人 有 假死 的 感觉 ， 但 是 ， 如 有 果 是 点 点 
扩 这 种 横向 的 动画 效 霖 ， 用 户 束 会 耐心 很 多 ， 体 验 也 会 好 很 多 ， 用 户 


流失 率 就 会 有 所 下 降 。 没 错 ， 我 们 可 以 利用 这 里 的 '\A' 换 行 特 性 
让 “...” 这 几 个 字符 动 起 来 ，HTML 和 CSS 代 码 如 下 : 


正在 加 载 中 <dot>.. .</dot> 

dot { 
display: inline-block; 
height: 1em; 
line-height: 1; 
text-align: Left， 
vertical-align: -.25em; 
overflow: hidden; 


::before { 

display: block; 

content: '...\A..\A.'， 

white-space: pre-wrap; 

animation: dot 3s infinite step-start both,; 


} 

@keyframes dot { 
33% { transform: translateY(-2em)， } 
66% { transform: translateY(-1iem); } 


} 


效果 即 达 成 ，IE6 至 IE9 浏 贤 妖 下 是 静态 的 点 点 态 ， 文 持 
animation 动 画 的 浏览 右 下 全 部 都 是 打点 1oading 动 画 效 果 ， 颜 色 大 
小 可 控 ， 使 用 非 背 方便 。 寿 想 感 受 效 果 ， 可 以 手动 输入 
http://demo.cssworld.cn/4/1-9.php 或 者 扫 右 侧 的 二 维 码 。 


动画 实现 的 原理 不 难 理解 ， 揪 入 3 行内 容 ， 分 别 是 3 个 点 、2 个 点 和 
1 个 点 ， 然 后 通过 transform 控 制 垂直 位 置 ， 依 次 展示 每 一 行 的 内 


只 是 其 他 一 些 细节 怕 是 很 多 人 反而 有 疑问 。 
(1) 为 什么 使 用 <dot> 这 个 元 素 ? 


(2) 为 什么 使 用 : :before， 可 不 可 以 使 用 : :after? 


(3) 从 content 属 性 值 来 看 ， 是 3 个 点 在 第 1 行 ， 而 1 个 点 反而 在 
最 后 一 行 ， 为 什么 这 么 处 理 ? 


(4) 这 里 white-space 值 为 何 使 用 的 是 pre-wrap 而 不 是 pre? 


这 4 个 问题 的 答案 分 别 如 下 。 


(1) <dot> 是 自 定 义 的 一 个 标签 元 素 ， 除 了 简约 、 语 义 化 明显 
外 ， 更 重要 的 是 方便 癌 下 兼容 ，IE8 等 低 版 本 浏 唤 如 不 认识 目 定义 的 
HTML 标 签 ， 因 此 ， 会 乖 形 地 显示 里 面 默认 的 3 个 点 ， 对 我 们 的 CSS 代 
人 码 完全 忽略 。 


(2) 伪 元 素 使 用 : :before 同 时 display 设 置 为 block， 是 为 了 
在 高 版 本 浏览 器 下 原来 的 3 个 点 推 到 最 下 面 ， 不 会 影响 content 的 3 行 
内 容 显 示 ， 如 果 使 用 : :after 怕 是 效果 就 很 难 实现 了 。 


(3) 3 个 点 在 第 一 行 的 目的 在 于 兼容 IE9 浏 览 器 ， 因 为 IE9 浏 览 絮 
认识 <dot> 以 及 : ;before，,， 但 是 不 支持 CSS 新 世界 的 animation 属 
性 ， 所 以 ， 为 了 下 9 也 能 正常 显示 静态 的 3 个 点 ， 故 而 把 3 个 点 放 在 第 一 
行 。 


(4) 这 里 的 white-space:pre-wrap 改 成 white-space:pre 
效果 其 实 是 一 样 的 ， 之 所 以 使 用 pre-wrap 作 为 值 完 全 是 心情 使 然 。 关 
于 两 者 的 差异 本 书后 面 会 介绍 ， 这 里 移 不 用 深究 。 


还 有 最 后 几 个 小 技巧 ， 首 先 ，'\A' 是 不 区 分 大 小 写 的 ; 其 
次 ，'XD ' 也 能 实现 换行 效果 ， 但 是 ， 要 想 上 下 行 对 齐 ， 需 要 用 
在 : :before 仿 元 素 上 ， 因 为 CR 是 将 光标 移动 到 当前 行 的 开头 ， 而 LEF 
是 将 光标 “垂直 ”移动 到 下 一 行 。 
3. content 图 片 生成 


content 图 片 生成 指 的 是 直接 用 ur1 功 能 符 显 示 图 片 ， 例 如 : 


div:before { 
content: url(1.jpg); 


La 

ur1 功 能 符 中 的 图 片 地 址 不 仅 可 以 是 常见 的 png、jpg 格 式 ， 还 可 
以 是 ico 图 片 、svg 文 件 以 及 base64URL 地 址 ， 但 不 支持 CSS3 渐 变 背景 
图 。 


虽然 文 持 的 图 片 格式 多 种 多 样 ， 但 是 实际 项 目 中 ，content 图 片 
生成 用 得 并 不 多 ， 主 要 原因 在 于 图 片 的 尺寸 不 好 控制 ， 我 们 设置 宽 高 
无 法 改变 图 片 的 固有 尺寸 。 所 以 ， 伪 元 素 中 的 图 片 更 多 的 是 使 用 
background-image 模 拟 ， 类 似 这 样 : 


div:before { 
content: ''; 


background: url(1.jpg); 


在 我 看 来 content 图 片 生成 技术 的 实用 性 ， 还 不 如 上 一 市 提 到 的 
直接 使 用 content 属 性 替换 文字 为 图 片 的 技术 ， 除 非 这 个 生成 的 图 片 
是 base64URL 地 址 。 因 为 content 图 片 和 <img> 图 片 的 加 载 表 现 是 一 
样 的 ， 如 果 没 有 尺寸 限制 ， 都 是 尺寸 为 0， 然 后 忽然 图 片 尺寸 一 下 子 出 
现 ， 所 导致 的 问题 就 是 页 面 加载 的 时 候 会 晃动 ， 影 响 体 验 。 为 了 避免 
这 个 问题 ， 我 们 只 能 限制 容器 尺寸 ， 那 么 ， 既 然 限制 了 容器 尺寸 ， 为 
何不 使 用 background-image 呢 ? 显然 更 好 控制 啊 ? 所 以 ， 只 有 不 需 
要 控制 尺寸 的 图 片 才 有 使 用 优势 。 


base64 图 片 由 于 内 联 在 CSS 文 件 中 ， 因 此 直接 出 现 ， 没 有 尺寸 为 0 
的 状态 ， 同 时 无 须 额外 设置 display 属 性 值 为 块 状 ，CSS 代 码 更 省 。 
如 果 还 没 理解 我 说 的 ， 可 以 看 一 个 对 比例 子 ， 就 明白 什么 意思 了 。 


下 面 两 段 CSS 代 码 分 别 是 content 图 片 生成 和 content 辅 助 元 素 


至 景 图 


a[target="_blank"]:after { 

content: 
url(data:image/gif;base64,ROl1GODI1hBQAFAIABAMOAAAAAACH5BAEAAAEALAAAA 
AA 
FAAUAAAIHRIB2eKuOCgA7 ) ; 


} 
a[target="_blank"]:after { 


content: ''; 

display: inline-block; 

width: 6px; 

height: 6px; 

background: url('blank.gif'"'); 


可 以 看 到 明显 前 者 使 用 的 CSS 声 明 数 量 少 很 多 。 这 里 有 一 个 实例 ， 
演示 了 如 何 借助 base64 地 址 和 content 图 片 生成 技术 非常 简单 地 实现 
新 标签 页 链接 标示 的 效果 ， 手 动 输入 http://demo.cssworld.cn/4/1-10.php 
或 者 扫 下 面 的 二 维 码 。 结 果 如 图 4-19 所 示 。 


点 击 这 个 链接 当前 页 刷新 ， 看 看 有 没有 标记 ; 点 
击 这 个 链接 。， 新 标签 页 新 打开 一 次 本 页 面 ， 看 
春 有 没有 标记 。 


图 4-19 ”新 标签 页 链接 标示 效果 


4. 了 解 content 开 启 闭合 符号 生成 


content 文 持 的 属性 值 中 有 一 对 不 常用 的 open-quote 和 close- 
quote 关 键 字 ， 顾 名 思 义 ， 就 是 “开启 的 引号 ”和 “闭合 的 引号 ”"， 使 用 纯 
正 的 中 文 解释 就 是 < 上 引号 "和 “下 引号 ”。 


如 果 单 看 表象 名 称 ， 貌 似 open-quote 和 close-quote 没 什么 特 
别 ， 我 直接 使 用 : 


di:before { 
content: '“'; 


} 
q:after { 
content: '”',; 


忆 不 更 好 ? 看 ， 更 易 懂 ， 代 码 的 字符 数 还 少 了 好 儿 个 。 但 是 ， 实 际 
上 ，open-quote 和 close- quote 不 只 是 引号 这 么 简单 。 


CSS 世 界 中 有 一 个 名 为 quotes 的 属性 ， 可 以 指定 open-quote 和 
close-quote 字 符 具 体 是 什么 。 例 如， 我 们 可 以 针对 不 同 语言 指定 不 
同 的 前 后 符号 : 


<p lang="ch"><q> 这 本 书 很 赞 ! </q></p> 

<p lang="en"><q>This book is very good!</q></p> 
<p lang="no"><q>denne bog er fantastisk!</q></p> 
/* 为 不 同 语言 指定 引号 的 表现 */ 

:lang(ch) > q { quotes: '”' '”',; 

:lang(en) > q { quotes: '"'" '"'; } 
:lang(no) > q { quotes: '«' '»'; } 


/* 在 q 标 签 的 前 后 插入 引号 */ 
q:before { content: open-quote; } 
dq:after { content: close-quote; } 


具体 表现 如 图 4-20 所 示 。 


“这 本 书 很 装 !“” 
"This book is very good!" 


«denne bog er fantastisk!; 


图 4-20 不 同 语言 指定 不 同 开启 闭合 符号 


你 以 为 open-quote 和 close-quote 可 以 使 用 不 同 闭 合 符 号 就 结 
束 了 吗 ? 还 没有 结束 ， 虽 然 这 个 quotes 顾 名 思 义 是 “引号 ”， 但 是 其 实 
际 功能 是 : 我 们 可 以 指定 几乎 任意 的 字符 ， 而 且 是 任意 数量 的 字符 。 
因此 ， 我 们 可 以 玩 得 更 加 灵活 多 变 : 


aSsk { 
quotes: ! 提 问 : 4 1 DU 


.answer { 
quotes: ! 回答: 4 1 De 


.ask:before, 
.answer:before { 
content: open-quote,; 


.ask:after, 
.answer:after { 

content: close-quote; 
} 


<p class="ask"> 为 什么 open-quote/close-quote 很 
<p class="answer"> 因 为 直接 使 用 字符 更 干脆 ! </p> 


结果 与 如 图 4-21 所 示 类 似 。 


提问 : “为 什么 open-quote/close-quote 很 少 使 用 ?" 


回答 : “因为 直接 使 用 字符 更 干脆 ! 


图 4-21 ”普通 字符 旭 占 鹊 业 效果 


CSS 这 门 语言 很 有 意思 ， 我 们 常用 的 一 些 功能 往往 并 不 是 这 性 
当初 设计 的 本 意 ， 就 好 比 这 里 的 open-quote 本 意 应 该 显示 引号 
里 却 主 要 用 来 显示 标题 。 大 多 数 服 务 型 网 站 都 是 有 帮助 页 面 的 ， 使 用 
这 种 技术 可 以 让 我 们 的 HTML 更 加 干净 简洁 。 


通过 上 面 一 番 简 单 介绍 ，open-dquote 和 close-quote 给 人 感觉 
挺 厉害 的 ， 应 该 被 广泛 使 用 才 对 ， 可 为 何 很 多 人 闻所未闻 、 见 所 未 见 
呢 ? 

答案 就 在 于 此 技术 具有 完全 可 蔡 代 性 ， 旦 替换 实现 的 方法 还 更 容 
易 上 手 。 我 们 还 以 上 面 的 “提问 /回答 ”应 用 为 例 ， 如 果 我 们 直接 使 用 字 
从 生成 会 这 样 : 


.ask:before { 
content:' 提 问 : “'， 


.answer :before EE 
141， 


content : ' 回 答 : 


.ask:after, 
.answer:after { 
content: '”',， 


只 出 现 了 一 个 CSS 属 性 ， 学 习 成 本 更 低 ;， 直接 使 用 字符 ， 更 容易 理解 ; 
代码 量 似乎 也 少 了 那么 一 点 点 。 由 于 直接 “字符 生成 ”可 以 很 好 地 满足 
我 们 的 开发 需求 ， 因 此 ， 还 需要 额外 学 习 的 open-quote 和 close- 
duote 瓯 鲜 有 人 问津 了 。 


实际 上 ， 我 们 可 以 把 open -quote 和 close-quote 看 成 是 一 种 变 
量 ， 理 论 上 ， 这 种 设计 要 比 直 接 字 符 和 输出 更 好 维护 ， 其 原理 等 同 于 
JavaScript 中 的 变量 ， 类 似 这 样 : 


Var quotes = ['”', '”']; 


var openQuote = quotes[0]; 
var closeQuote = quotes[1]; 


理论 上 应 该 更 好 维护 ， 但 是 ，CSS 中 的 选择 器 本 身 就 有 变量 的 概 
念 ， 如 ,ask 和 .answer， 只 要 改 一 下 ， 所 有 有 相关 类 名 的 元 素 都 会 发 
生变 化 。 于 是 ， 使 用 open-quote 和 close-quote 进 行内 容 生 成 的 最 
具 说 服 力 的 理由 也 被 扼杀 了 。 


综合 这 些 原 因 ， 看 似 强大 的 open-quote 和 close-quote 关 键 字 
最 后 变 得 很 鸡肋 。 


顺便 提 一 下 ，CSS 中 还 有 no-open-quote 和 no-close-quote 
天 键 字 ， 顾 名 思 义 ， 引 号 不 需要 了 ， 同 样 是 看 上 去 很 酷 实 际 却 很 鸡 肪 
的 CSS 天 键 子 ， 这 里 我 就 不 展开 了 。 


5. content attr 属 性 值 内 容 生成 


此 功能 比较 章 用 ， 我 个 人 用 得 吏 比 较 多 ， 比 方 说 前 面 一 节 替 换 元 
素 那 里 利用 alt 属 性 显示 图 片 质 述 信息 的 例子 : 


img::after { 
/* 生成 alt 信 息 */ 
content: attr(alt); 
/* 其 他 CSS 略 */ 


} 


除了 原生 的 HTML 属 性 ， 目 定义 的 HTML 属 性 也 是 可 以 生产 的 ， 例 
如 : 


.icon:before { 
content: attr(data-title); 
} 


需要 注意 的 是 ，attr 功 能 符 中 的 属性 值 名 称 千 万 不 要 自以为是 地 
在 外 面 加 个 引号 。 不 能 有 引号， 否则 浏览 器 会 认为 是 无 效 的 声明 ， 如 
图 4-22 所 示 。 


pseudo ;before element 


A cententi BttF( data 上 te: 
下 
J 


图 4-22 attr 里 面值 不 能 有 引号 


此 技术 虽 实 用 ， 但 并 无 多 少 可 以 展开 的 地 方 ， 因 此 就 说 这 么 多 。 
6. 深入 理解 content 计 数 器 

计数 器 效果 可 以 说 是 content 部 分 的 重 中 之 重 ， 因 为 此 功能 非常 
强大 、 实 用 ， 且 不 具有 可 替代 性 ， 甚 至 可 以 实现 连 JavaScript 都 不 好 实 
现 的 效果 。 但 同样 ，content 计 数 器 具有 一 定 的 深度 ， 大 家 可 以 适当 
放 慢 节奏 。 


所 请 CSS 计 数 亏 效 末 ， 指 的 是 使 用 CSS 代 码 实现 随 看 元 素数 目 增 
多 ， 数 值 也 跟着 变 大 的 效果 。 举 个 例子 ， 我 曾经 在 业余 时 间 给 同事 做 
过 一 个 点 末 半 的 小 系统 ， 由 于 来 汗 店 经 第 会 有 水 来 因 “ 琳 品 ” 烛 发 修 苋 
相 购 严 而 缺 货 的 情况 ， 因 此 ， 每 人 可 以 选择 3 种 目 由 搭配 的 了 饮品， 以 免 
无 货 的 造 逢 。 于 是 ， 残 有 了 第 1 选择 、 第 2 选择 和 人 第 3 选择 ， 如 图 4-23 所 
es 


您 已 选择 : | 黄瓜 汁 了 | 黄瓜 梨 汁 了 | 双 瓜 汗 


图 4-23 ”简单 的 计数 器 效果 实现 举例 


图 中 的 灰色 小 字 中 的 1、2、3 束 是 使 用 CSS 计 数 郁 生成 的 ， 这 个 可 
以 说 是 最 最 基本 、 最 最 简单 的 计数 絮 应 用 了 。 实 际 上 ， 计 数 如 能 够 实 
现 的 效果 非常 强大 。 但 是 ， 万 丈 高 楼 平地 起 ， 在 介绍 高 级 应 用 之 前 ， 


我 们 一 定 要 先 牢 牢 掌 握 与 计数 颖 相关 的 基础 知识 。 


CSS 计 数 惑 跟 我 们 军训 报 数 一 样 。 其 中 有 这 么 几 个 关键 点 。 
(1) 班级 命名 : 有 个 称呼 ， 如 生 信 4 班 ， 就 知道 谁 是 谁 了 。 


(2) 报 数 规则 1、2、3、4 弟 增 报 数 ， 还 是 1、2、1、2 报 数 ， 让 
班级 的 人 知道 。 


(3) 开始 报 数 : 不 发 口令 ， 大 眼 瞧 小 眼 ， 会 乱 了 秩序 。 


巧 的 是 ， 以 上 3 个 关键 点 正好 对 应 CSS 计 数 姻 的 两 个 属性 
(counter-reset 和 counter-increment) 和 一 个 方法 


(counter()/counters()) ， 下 面 依次 讲解 。 


(1) 属性 counter -reset。 顾 名 思 义 ， 就 是 “计数 器 - 重 置 "的 意 
思 。 其 实 就 是 “班级 命名 ”， 主 要 作用 就 是 给 计数 器 起 个 名 字 。 如 果 可 
能 ， 顺 便 告 诉 下 从 哪个 数字 开始 计数 。 默 认 是 9， 注意 ， 默 认 是 9 而 不 
是 1。 可 能 有 人 会 疑惑 ， 网 上 的 各 种 例子 默认 显示 的 第 1 个 数字 不 都 是 1 
吗 ? 那 是 因为 受 了 counter-increment 普 照 的 影响 ， 后 面 会 详细 讲 


解 。 


好 ， 这 里 我 们 先 看 两 个 简单 的 counter -reset 的 例子 : 


/* 计数 器 名 称 是 'wangxiaoer'， 并 且 默 认 起 始 值 是 2 


,XXX { counter-reset: wangxiaoer 2; } 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-11.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-24 所 示 。 


我 叫 王 小 二 ， 字 如 其 和 名， 下 面 要 出 现 的 数字 是 : 


2 


图 4-24 counter-reset 为 起 始 值 为 2 


counter-reset 的 计数 重 置 可 以 是 负数 ， 如 -2， 也 可 以 写成 小 
数 ， 如 2.99， 不 过 ，IE 和 Firefox 对 此 都 不 识别 ， 认 为 是 不 合法 数值 ， 
直接 无 视 ， 当 作 默 认 值 0 来 处 理 ，Chrome 不 嫌 贫 嫉 富 ， 任 何 小 数 都 是 向 
下 取 整 ， 如 2 .99 当 成 2 处 理 ， 于 是 王 小 二 还 是 那个 王 小 二 。 


到 此 为 止 ? 当然 不 是 ! counter -reset 还 有 一 手 ， 就 是 多 个 计数 
器 同时 命名 。 例 如 ， 王 小 二 和 王 小 三 同时 登台 : 


,XXX { counter-reset: wangxiaoer 2 wangxiaosan 3; } 
直接 空格 分 隔 ， 而 不 是 使 用 喜 号 分 隔 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-12.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-25 所 示 。 


时 


我 叫 王 小 二 ， 万 万 没 想到 ， 会 出 现 另 外 一 个 数字 : 


图 4-25 counter-reset 多 值 并 存 


另外 ，counter-reset 还 可 以 设置 为 none 和 inherit。 取 消 重 
置 以 及 继承 重 置 。 这 里 束 不 展开 了 。 


(2) 属性 counter-increment。 顾 名 思 义 ， 就 是 “计数 器 递 
增 ” 的 意思 。 值 为 counter-reset 的 1 个 或 多 个 关键 字 ， 后 面 可 以 跟随 


数字 ， 表 示 每 次 计数 的 变化 值 。 如 采 省 略 ， 则 使 用 默认 变化 值 1 (方便 
起 见 ， 下 面 都 使 用 默认 值 做 说 明 ) 。 


CSS 的 计数 器 的 计数 是 有 一 套 规 则 的 ， 我 将 之 形象 地 称 为 “普照 规 
则 »”。 具 体 来 讲 就 是 ， 普照 源 (counter-reset) 唯一 ， 每 普照 
(counter-increment) 一 次 ， 普 照 源 增加 一 次 计数 值 。 


于 是 ， 我 们 就 可 以 解释 上 面 提 到 的 “默认 值 是 0 的 问题 了 。 通 常 
CSS 计 数 需 应 用 的 时 候 ， 我 们 都 会 使 用 counter-increment， 肯 定 
要 用 这 个 ， 否 则 怎么 递增 呢 ! 而 且 一 般 都 是 一 次 普照 ， 正 好 加 1， 于 
是 ， 第 一 个 计数 的 值 就 是 1 (0+1=1) ! 


下 面 通过 几 个 例子 给 大 家 形象 地 展示 一 下 “普照 规则 ”。 


手动 输入 http:/demo.cssworld.cn/4/1-13.php 或 者 扫 下 面 的 二 维和 码 。 
本 示例 中 ， 王 小 二 的 counter -reset 值 是 wangxiaoer 2, 但 是 ， 
显示 的 计数 不 是 小 2 而 是 小 3， 王 小 二 变 成 了 王 小 三 ! 如 图 4-26 所 示 。 


我 叫 王 小 二 ， 万 万 没 想到 ， 会 出 现 另 外 一 个 数字 : 


图 4-26 _ counter -increment 递 增 与 counter -reset 值 


示例 效果 的 核心 代码 如 下 : 


.Counter { 
counter-reset: wangxiaoer 2; 
counter-increment: wangxiaoer; 


} 


.Counter:before { 


content: counter (wangxiaoer ); 


} 


<p class="counter"></p> 


这 里 counter-increment 普 照 了 <p> 标 签 ，counter-reset 值 
增加 ， 上 默认 递增 1， 于 是 计数 从 设置 的 初始 值 2 变 成 了 3,， wangxiaoer 
就 是 这 里 的 计数 器 ， 自 然 伪 元 素 content 值 counter (wangxiaoer ) 
就 是 3。 


当然 ， 它 也 可 以 普照 自身 ， 也 就 是 counter-increment 直 接 设 
置 在 伪 元 素 上 : 


.Counter { 
counter-reset: wangxiaoer 2; 


.Counter:before { 


content: counter (wangxiaoer ); 
counter-increment: wangxiaoer; 


依然 是 1 次 普照 ， 依 旧 全 局 的 计数 紫 加 1， 所 以 显示 的 数值 还 是 3， 
和 上 面 的 例子 一 样 。 


趁 执 打铁， 如果 父 元 素 和 子 元 素 都 被 counter -increment 普 照 1 
次 ， 结 果 会 如 何 呢 ? 


很 简单 ， 父 元 素 1 次 普照 ， 子 元素 1 次 普照 ， 共 2 次 普照 ， 
counter-reset 设 置 的 计数 咒 值 增加 2 次 ， 计 数 起 始 值 是 2， 于 是 现 
实 的 数字 就 是 4 啦 ! 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-14.php 或 者 扫 下 面 
的 二 维 码 。 结 果 4 如 ”图 4-27 所 示 。 


我 叫 王 小 二 ， 万 万 没 想 到 ， 我 现在 居然 成 了 王 小 ... 


a 


图 4-27 counter-increment 父 子 连续 普照 递增 


核心 CSS 代 码 如 下 : 


.Counter { 
counter-reset: wangxiaoer 2; 
counter-increment: wangxiaoer; 


.Counter:before { 
content: counter (wangxiaoer ); 
counter-increment: wangxiaoer; 


总 而 言 之 ， 无 论 位 置 在 何 处 ， 只 要 有 counter-increment， 对 
应 的 计数 器 的 值 就 会 变化 ，counter( ) 只 是 输出 而 已 ! 


理解 了 “普照 规则 ”， 通 党 的 计数 器 递增 效果 也 就 可 以 理解 了 。 


考虑 下 面 这 两 个 问题 : 


(1) 爸爸 受到 普照 ， 且 重 置 默认 值 6， 爸 爸 有 两 个 孩子 。 孩 子 自 
身 都 没有 普照 。 两 个 孩子 的 计数 值 是 多 少 ? 


(2) 爸爸 没有 普照 ， 重 置 默认 值 0， 爸 爸 有 两 个 孩子 。 孩 子 上 自身 
都 接受 普照 。 两 个 孩子 的 计数 值 是 多 少 ? 


答案 是 : 1,1 和 1, 21 


答案 居然 不 一 样 ， 有 什么 差别 呢 ? 


很 简单 。 什 么 爸爸 、 孩 子 ， 你 都 不 要 关心 ， 只 需要 看 被 普照 了 几 
次 。 情 况 1 只 有 和 爸爸 被 普照 ， 因 此 ， 计 数 器 增加 1 次 ， 此 时 两 个 孩子 的 
counter 上 自然 都 是 1。 人 情况 2， 两 个 孩子 被 普照 ， 普 照 2 次 ， 第 一 个 孩子 
普照 之 时 ， 计 数 器 加 1， 也 就 是 1; 第 二 个 孩子 普照 之 时 再 加 1， 于 是 就 
是 2。 于 是 ， 两 个 孩子 的 counter 输 出 就 是 1, 2。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-15.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-28 所 示 。 


图 4-28 ”兄弟 情 深 ， 计 数 递增 


核心 CSS 代 码 如 下 : 


.Counter { 
counter-reset: wangxiaoer 2; 


.Counter :before, 

.Counter:after { 
content: counter (wangxiaoer ); 
counter-increment: wangxiaoer; 


} 


计数 器 的 数值 变化 遵循 HTML 泻 染 顺序 ， 遇 到 一 个 increment 计 
数 器 就 变化 ， 什 么 时 候 counter 输 出 就 输出 此 时 的 计数 值 。 


除了 以 上 基本 特性 外 ，counter -increment 还 有 其 他 一 些 设 
定 O 


。 Counter -reset 可 以 一 次 命名 两 个 计数 右 名 称 ，counter - 
increment 自 然 有 与 之 呼应 的 设 定 ， 在 写法 上 也 是 空格 区 分 就 可 
以 了 。 例 如 : 


.Counter { 
counter-reset: wangxiaoer 2 wangxiaosan 3; 
counter-increment: wangxiaoer wangxiaosan; 


} 


.Counter:before { 


} 


.Counter:after { 
content: counter(wangxiaosan); 
} 


content: counter (wangxiaoer ); 


结果 如 图 4-29 所 示 。 


。 正如 本 节 开 始 时 提 到 的 ， 这 变化 的 值 不 一 定 是 1， 可 以 灵活 设置 。 
例如 : 


counter-increment: counter 2 


那 惑 是 两 个 两 个 地 增加 ， 对 比 看 更 棒 ! 图 4-30 左 半 古 上 默认 的 加 1， 
右 半 是 加 2。 


我 叫 王 小 二 ， 万 万 没 想 到 ， 兄弟 情 深 ， 计数 递增 ! 


图 4-29 多 个 计数 器 同时 递 j 


ls 


1，increment + 显示 2， increment + 显示 


2. increment + 显示 4. increment + 显示 

3， increment + 显示 6.，increment + 显示 
4，increment + 显示 8，increment + 显示 

4， 显示 8， 显示 

4. 显示 8. 显示 


图 4-30 不 同 弟 增值 的 计数 对 比 
变化 的 值 还 可 以 是 负数 ， 例 如: 
counter-increment: counter -1 
这 样 就 有 了 递减 排序 效果 啦 ! 

。 值 还 可 以 是 none 或 者 inherit 。 


(3) 方法 counter()Vcounters( )。 这 是 方法 ， 不 是 属性 。 类 
似 CSS3 中 的 calc( ) 计 算 。 这 里 的 作用 很 单纯 ， 即 显示 计数 ， 不 过 名 
称 、 用 法 有 多 个 ， 如 图 4-31 所 示 。 


content: co } 


counter (name) 
急 counter (name, style) 
急 counters (name, string) 
counters [name, strine, style) 


图 4-31 counter/counters 的 一 些 名 称 和 用 法 


到 目前 为 止 的 所 有 示例 使 用 的 都 古 最 位 单 的 用 法 : 


/* name 就 是 counter-reset 的 名 称 */ 
counter (name) 

那 下 面 这 个 语法 是 什么 意思 呢 ? 
counter (name, style) 


这 里 的 Style 参 数 还 古 有 些 名 党 的 。 它 文 持 的 天 键 子 值 束 是 
list-style-type 文 持 的 那些 值 。 它 的 作用 十 : 我 们 递增 递减 可 以 
不 一 定 是 数字 ， 还 可 以 是 英文 字母 或 者 罗马 文 等 。 


list-style-type: disc | circle | square | decimal | lower-roman | 
upper-roman | 


lower-alpha | upper-alpha | none | armenian | cjk-ideographic | 


georgian | lower-greek 


| hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | 
lower-latin | upper-latin 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-16.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-32 所 示 。 


我 叫 王 小 二 ， 万 万 没 想 到 ， 我 变 成 了 罗马 人 ! 


图 4-32 ”小 写 罗马 数字 格式 表示 当前 计数 器 的 值 
核心 CSS 代 码 如 下 : 


content: counter (wangxiaoer, lower-roman); 


counter 还 支持 级 联 。 也 就 是 说 ， 一 个 content 属 性 值 可 以 有 多 


个 counter() 方 法 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-17.php 或 者 扫 下 面 
的 二 维 码 。 结 有 果 如 图 4-33 所 示 。 


图 4-33 ”多 个 counter 并 存 


核心 CSS 代 码 如 下 : 


.Counter { counter-reset: wangxiaoer 2 wangxiaosan 3; } 
.Counter:before { 


content: counter(wangxiaoer) '\A' counter(wangxiaosan); 


white-space: pre; 


下 面 介绍 一 下 counters( ) 方 法 。 看 似 只 比 counter 多 了 个 字母 
Ss, 有 着 至 | 后 空 的 意味 在 里 面 。counters 几 乎 可 以 说 
是 藤 套 计数 的 代名词 。 


我 们 平时 的 序号 不 可 能 就 只 是 1、2、3、4...... 还 会 有 诸如 1.1、 
1.2、1.3 等 的 子 序 号 。 前 者 就 是 counter( ) 干 的 事情 ， 后 者 就 是 
counters( ) 干 的 事情 。 


counters() 的 基本 用 法 为 册 : 


counters(name, string); 


其 中 ，string 参 数 为 字符 串 (需要 引号 包围 的 ， 是 必需 参数 ) ， 表 示 
子 序号 的 连接 字符 串 。 例 如 ，1 .1 的 string 就 是 '.'，14-1 就 是 '-'。 


看 上 去 很 简单 。 但 是 ， 如 果 理 解 不 是 很 深刻 ， 日 后 再 使 用 肯定 会 
遇 到 厅 烦 一 一 “号 ?怎么 没有 子 序列 ， 明 明 语 法 正确 啊 ? ”首先 ， 记 住 
这 一 句 话 : “普照 源 是 唯一 的 。” 所 以 ， 如 果 只 在 <body> 标 签 上 设置 
counter-reset， 就 算 子 元 素 肉 套 了 里 外 十 八 层 ， 还 是 不 会 有 任何 般 
套 序号 出 现 ! 所 以 ， 要 想 实 现 峙 套 ， 必 须 让 每 一 个 列表 容器 拥有 一 
个 “普照 源 "”， 通 过 子 辈 对 父辈 的 counter -reset 重 置 、 配 合 
counters() 方 法 才能 实现 计数 般 套 效果 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-18.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-34 所 示 。 


我 叫 王 小 二 ， 万 万 没 想 到 ， 一 着 不 愤 ， 娃娃 连 营 满 地 滚 : 


1. 我 是 王 小 二 
1-1. 我 是 王 小 二 的 大 儿子 
1-2. 我 是 王 小 二 的 二 儿子 
1-2-1. 我 是 王 小 二 的 二 儿子 的 大 孙子 
1-2-2. 我 是 王 小 二 的 二 儿子 的 二 孙子 
1-2-3. 我 是 王 小 二 的 二 儿子 的 小 孙子 
1-3. 我 是 王 小 二 的 二 儿子 
2. 我 是 王 小 二 
3. 我 是 王 小 四 
3-1. 我 是 王 小 四 的 大 儿子 


图 4-34 _ counters 的 String 参数 与 舱 套 


使 用 counters( ee 
的 麻烦 一 一 “ 喷 ， 怎 么 子 序 列 不 按 层级 顺序 来 呀 ? 命名 语法 明明 完全 
确 啊 ! ”还 是 要 记 住 这 一 句 话 :“ 一 个 容器 里 的 普照 源 (counter- 
reset) 是 唯一 的 。” 所 以 ， 如 果 你 不 小 心 把 计数 显示 和 计数 重 置 元 素 
以 兄弟 元 素 形 式 放 在 一 起 (虽然 HTML 内 容 布局 呈现 是 没有 异常 的 ) 
就 很 可 能 会 出 现 计数 序号 乱入 的 情况 。 


还 是 举 个 例子 说 明 一 下 吧 ， 手 动 输入 http://demo.cssworld.cn/4/1- 
人 。 结果 如 图 4-35 所 示 。 这 时 就 会 看 到 标 红 部 
分 的 序号 显示 异常 了 ! 


为 何 会 出 现 这 个 问题 ? 我 们 看 一 人 HTML (主要 是 注释 ) : 


<div class="reset"> 
<div class="counter"> 我 是 王 小 二 </div> 


<div class="reset"><-- 先 下 面 文字 说 明 --> 


</div> 
<div class="counter"> 我 是 王 小 三 </div> 
<div class="counter"> 我 是 王 小 四 </div> 


<div class="reset"> 


<div class="counter"> 我 是 王 小 四 的 大 儿子 </div> 
</div> 
</div> 


这 里 的 ,reset 与 上 面 的 .counter 是 兄弟 关系 ， 而 不 是 父子 关系 。 虽 
然 布局 渲染 上 没有 差异 ,但 是 一 个 容器 的 counter -reset 是 唯一 的 ， 
一 旦 子 元 素 出 现 counter-reset， 就 会 改变 整个 容器 的 般 套 关系 ， 于 
是 ， 后 面 的 “ 王 小 三 ”* 王 小 四 ”其 实 已 经 进入 了 二 级 租 套 ， 因 此 显示 的 是 
1-3 和 和 11-4， 相信 读者 稍稍 体会 一 下 就 能 明日 7 了。 


我 叫 王 小 二 ， 万 万 没 想 到 ， 一 着 不 愤 ， 子孙 成 群 (反例) : 


1. 我 是 王 小 一 
1-1. 我 是 王 小 二 的 大 儿子 
1-2. 我 是 王 小 二 的 二 儿子 
1-2-1. 我 是 王 小 二 的 二 儿子 的 大 孙子 
1-2-2. 我 是 王 小 二 的 二 儿子 的 二 孙子 
1-2-3. 我 是 王 小 二 的 二 儿子 的 小 孙子 
1-2-4. 我 是 王 小 二 的 三 儿子 
1-3. 我 是 王 小 二 
1-4. 我 是 于 小 四 
1-1. 我 是 王 小 四 的 大 儿子 


图 4-35 counters 列 表 被 重 置 乱 入 


这 种 计数 效果 在 模拟 书籍 的 目录 效果 时 非常 实用 ， 大 家 可 以 参照 
上 面 正确 的 棋 套 例子 修 修改 改 就 可 以 了 。 


counters( ) 也 是 支持 style 自 定义 递增 形式 的 : 
它 与 counter() 的 style 参数 使 用 一 致 ， 这 里 不 歼 述 。 


最 后 ， 还 有 一 个 比较 重要 的 点 需要 说 明 一 下 ， 就 是 显示 content 
计数 值 的 那个 DOM 元 素 在 文档 流 中 的 位 置 一 定 要 在 counter - 
increment 元 素 的 后 面 ， 否 则 是 没有 计数 效果 的 。 


举 个 例子 ， 我 们 可 以 使 用 纯 CSS 实 现 自动 统计 选中 元 素 个 数 的 效 
果 ， 但 是 很 可 能 显示 数值 的 视觉 位 置 是 在 操作 区 域 的 左 侧 或 者 上 方 ， 
类 似 图 4-36 所 示 。 


列表 选项 1 


列表 选项 2 (9 


列表 选项 3 


列表 选项 4 


256X192 


图 4-36 ”counters 数 值 显示 在 操作 区 域 左 侧 


如 琳 我 们 古 传 统 的 布局 ， 左 侧 的 圆圈 中 的 数值 必然 是 无 法 显现 
的 ， 我 们 需要 把 左 侧 的 列表 选项 元 素 放 在 操作 元 素 的 后 面 才 可 以 ， 类 
似 下 面 这 样 : 


<main></main> 
<nav></nav> 
7. content 内 容 生 成 的 混合 特性 


所 谓 “content 内 容 生 成 的 混合 特性 ” 指 的 是 各 种 content 内 容 生 
成 语法 是 可 以 混合 在 一 起 使 用 的 ， 举 下 面 儿 个 简单 的 例子 : 


a:after { 
content: "(" attr(href) ")"; 


} 
qd:before { 


content: open-quote url(1.jpg); 


.Counter:before { 
content: counters(wangxiaoer, '-') '. '，; 


于 是 ， 我 们 如 果 和 希望 在 伪 元 素 中 同时 显示 图 片 和 文字 排列 效果 ， 
只 需要 一 个 :before 或 者 一 个 :after 就 可 以 ， 完 全 不 需要 两 个 同时 上 


阵 、 分 别 负责 一 个 类 型 。 


总 而 襄 之 ，content 内 容 生 成 技术 是 非 第 强大 的 ， 关 键 要 看 大 家 
的 积累 、 有 灵感 和 创意 。 


4.2 温和 的 padding 属 性 


盒 尺 寸 四 大 家 族 元 素 中 ，padding 的 性 格 是 最 温和 的 。 所 谓 "“ 温 
和 ” 指 的 是 我 们 在 使 用 padding 进 行 页 面 开发 的 时 候 很 少 会 出 现 意 想 不 
到 的 情况 ， 这 种 感觉 束 好 比 和 一 个 几乎 不 会 发 脾气 的 人 相处 。 

padding 指 盒子 的 内 补 间 。“ 符 间 ” 这 个 词 比较 术语 化 ， 我 们 不 妨 
将 其 理解 为 快递 盒子 内 快递 商品 外 包 囊 的 那 层 起 保护 作用 的 海 绢 。 只 
是 在 CSS$ 中 ， 这 个 “ 海 绢 ?默认 是 透明 的 。 在 现实 世界 中 ， 海 绵 不 会 影 啊 
盒子 的 尺寸 ， 但 在 CSS 世 界 中 ， 尺 才 规 则 残 有 所 不 同 了 。 
4.2.1 padding 与 元 素 的 尺寸 

因为 CSS 中 默认 的 box-sizing 是 content-box， 所 以 使 用 
padding 会 增加 元 素 的 尺寸 。 例 如 : 


.box { 
width: 80px; 


padding: 20px; 


如 果 不 考 虑 其 他 CSS 干 扰 ， 此 时 .box 元 素 所 占据 的 宽度 就 应 该 是 120 像 
素 \80px +20pxx2) ， 这 其 实 是 不 符合 现实 世界 的 认 知 的 ， 人 们 总 是 
习惯 把 代码 世界 和 现实 世界 做 映射 ， 因 此 ， 新 人 难免 会 在 padding 的 
尺 二 问题 上 踩 到 点 蔽 。 这 也 导致 很 多 人 乐此不疲 地 设置 box-Sizing 
为 border-box， 甚 至 直接 全 局 重 置 ; 


* { box-sizing: border-box; } 


我 个 人 是 不 推荐 这 种 做 法 的 ， 原因 见 3.2.4 广 。 局 部 使 用 ， 尺 量 采 
用 无 宽度 以 及 宽度 分 离 准 则 实现 才 是 好 的 解决 之 道 。 


很 多 人 可 能 有 这 样 的 误区 ， 认 为 设置 了 box-sizing:border- 
box， 元 素 尺寸 束 不 会 变化 。 大 多 数 情 况 下 是 这 样 的， 但 是 ， 如 采 
padding 值 足够 大 ， 那 么 width 也 无 能 为 力 了 。 例 如 : 


.box { 
width: 80px; 
padding: 20px 60px; 
box-sizing: border-box; 


} 


则 此 时 的 width 会 无 效 ， 最 终 宽 度 为 120 像 素 (66pxx2) ， 而 里 面 的 
内 容 则 表现 为 “首选 最 小 宽度 ”。 


上 上 述 尺 寸 表 现 是 对 具有 块 状 特性 的 元 寻 而 言 的 ， 对 于 内 联 元 素 
(不 包括 图 片 等 替换 元 素 ) 表现 则 有 些许 不 同 。 这 种 不 同 的 表现 让 很 
多 很 多 的 前 端 同事 有 这 人 么 一 个 错误 的 认识 内 联 元 素 的 padding 只 会 
影响 水 平方 向 ， 不 会 影响 垂直 方 癌 。 


这 种 认 知 是 不 准确 的 ， 内 联 元 素 的 padding 在 垂直 方向 同样 会 影 
响 布 局 ， 影 响 视觉 表现 。 只 是 因为 内 联 元 素 没 有 可 视 宽 度 和 可 视 高 度 
的 说 法 (clientHeight 和 clientwidth 永 远 是 0) ， 垂 直方 向 的 行 
为 表现 完全 受 line-height 和 vertical-align 的 影响 ， 视 觉 上 并 
没有 改变 和 上 一 行 下 一 行内 容 的 间距 ， 因 此 ， 给 我 们 的 感觉 就 会 是 
直 padding 没 有 起 作用 。 


如 果 我 们 给 内 联 元 素 加 个 背景 色 或 者 边框 ， 自 然 就 可 以 看 到 其 尺 
寸 空间 确实 受 padding 影 响 了 。 例 如 : 


at 
padding: S50px; 


background-color: #cd0000; 


然后 表现 就 会 如 图 4-37 所 示 这 上 般 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/4/2-1.php 或 者 扫 下 面 的 二 维 码 。 


图 4-37 ”内 联 元 素 padding 垂 直方 向 也 是 有 效 的 


可 以 明显 看 到 ， 尺 寸 虽 有 效 ， 但 是 对 上 下 元 素 的 原本 布局 却 没 有 
任何 影响 ， 仅 仅 是 垂直 方 癌 发 生 了 技 琶 ， 如 岁 4-38 所 示 。 


CSS 中 还 有 很 多 其 他 场景 或 属性 会 出 现 这 种 不 影响 其 他 元 素 布局 而 
是 出 现 层 徐 效 果 的 现象 。 比 如 ，relative 元 素 的 定位 、 盒 阴影 box- 
shadow 以 及 outline 等 。 这 些 层 琶 现象 虽然 看 似 类 似 ， 但 实际 上 是 有 
区 别 的 。 其 分 为 两 类 : 一 类 是 纯 视 觉 层 琶 ， 不 影响 外 部 尺寸 ， 另 一 类 
则 会 影响 外 部 尺寸 。box-shadow 以 及 outline 属 于 前 者 ， 而 这 里 的 
inline 元 素 的 padding 层 车 属于 后 者 。 区 分 的 方式 很 简 单 ， 如 果 父 容 
钥 O0Verflow:auto， 层 车 区 域 超出 父 容器 的 时 候 ， 没 有 滚动 条 出 现 ， 
则 是 纯 视觉 的 ， 如 有 果 出 现 深 动 条 ， 则 会 影响 尺寸 、 影 响 布局 。 


如 果 上 面 的 示例 父 元 素 设 置 0overflow:auto， 则 会 有 类 似 图 4-39 
所 示 的 表现 。 


内 联 元 素 垂 直 padding 也 有 作用 实例 页 面 


图 4-38 ”内 联 元 素 padding 垂 直方 向 层 营 表现 


内 联 元 素 垂 直 padding 也 有 作用 实例 页 面 


图 4-39 内 联 元 素 牌 直 padding 影 响 父 级 出 现 滚 动 条 


由 此 可 见 ， 内 陵 元 素 padding 对 视觉 层 和 布局 层 具 有 双重 影响 ， 
所 有 类 似 “ 垂 直方 癌 padding 对 内 联 元 系 没 有 作用 ”的 说 法 显然 征 不 正 
确 的 。 


好 了 ， 现 在 知道 了 内 联 元 素 padding 有 用 ， 这 对 我 们 做 实际 CSS 
开发 有 什么 帮助 呢 ? 


首 匈 ， 我 们 可 以 在 不 影响 当前 布局 的 情况 下 ， 优 雅 地 增加 链接 或 
按钮 的 点 击 区 域 大 小 。 比 方 说 ， 文 章 中 会 有 一 些 文字 链接 ， 默 认 情 况 
下 ， 这 些 链接 的 点 击 区 域 的 高 度 是 受 font -size 字体 大 小 控制 的 ， 和 
行 高 没有 关系 。 尤 其 在 Chrome 等 浏览 器 下 ， 高 度 仅 lem， 这 么 小 的 高 
度 ， 要 是 在 移动 疾 ， 我 们 的 手指 不 一 定 能 够 一 次 点 中 ， 可 能 要 稚 好 多 
下 ， 此 时 束 有 必要 增加 竹 接 的 点 击 区 域 大 小 ， 但 古 前 提 古 不 影响 当前 
的 内 容 布 局 。 此 时 ， 我 们 就 可 以 使 用 padding 天 然 实现 我 们 想 要 的 效 
琳 ， 例 如 : 


article a { 
padding: .25em 0; 


前 文 多 次 提 人 到 ，CSS2.1 的 属性 就 古 为 了 图 文 显示 而 设计 的 ， 从 这 
一 太 出 发 ， 我 们 整 不 难 理解 为 何 内 联 元 素 的 焉 直 padding 会 是 这 样 的 
样式 表现 了 ， 目 的 吏 是 如 上 面 说 的 例子 这 样 ， 增 加 点 击 区 域 同 时 对 现 
有 布局 无 任何 影响 ， 如 采 我 们 设置 成 in1ine-block， 则 行 间 距 等 很 
多 厅 烦 事 吏 会 出 来 。 


当然 ，CSS 的 有 趣 之 处 在 于 我 们 可 以 利用 其 特性 表现 实现 其 设计 初 
囊 以 外 的 一 些 效 有 末 。 例 如 ， 这 里 有 个 人 简单 的 例子 ， 利 用 内 联 元 素 的 
padding 实 现 高 度 可 控 的 分 隔 线 。 传 统 偷懒 的 实现 方式 可 能 是 直接 使 
用 “管道 符 ”"， 如 : 


但 是 使 用 “管道 竺 "的话 ， 因 为 是 字符 ， 所 以 高 度 不 可 探 。 如 果 对 视觉 
呈现 要 求 比较 高 ， 就 需要 进行 CSS 图 形 模 拟 ， 其 中 方法 之 一 就 是 可 以 借 
助 内 联 元 素 和 padding 属 性 来 实现 ，CSS 和 HTML 代 码 如 下 : 
a + a:before { 

content: ""; 


font-size: 0; 
padding: 10px 3px 1px; 


margin-left: 6px; 
border-left: 1px solid gray; 


<a href=""> 登 录 </a><a href=""> 注 册 </a> 


一 个 高 度 不 那么 高 的 垂直 分 隔 符 就 出 来 了 了， 如 图 4-40 所 示 。 有 兴趣 
可 以 上 自己 感受 一 下 ， 手 动 输入 http:/demo.cssworld.cn/4/2-2.php 或 者 扫 
下 面 的 二 维 码 。 


图 4-40 ”内 联 元 素 padding 实 现 的 垂直 分 隔 符 


最 后 ， 再 简单 说 一 个 内 联 元 素 垂 下 padding 的 妙用 吧 ! 大 家 应 该 
都 知道 网 页 可 以 通过 地 址 栏 的 hash 值 和 页 面 HTML 中 id 值 一 样 的 元 素 
发 生 销 点 定位 吧 ? 有 时候， 我 们 布 望 定 位 的 元 素 ， 如 标题 距离 页 面 的 
顶部 有 一 段 距离 ， 比 方 说 页 面 正 好 有 一 个 50 像 素 高 的 
position:fixed 的 导航 栏 。 如 果 按 照 浏览 万 目 己 的 特性 ， 标 题 束 会 
定位 在 这 个 固定 导航 的 下 面 ， 这 显然 不 是 我 们 想 看 到 的 ， 那 去 么 办 
呢 ? 


很 多 人 会 想到 让 标题 栏 设 置 一 个 padding-top:50px， 但 是 ， 这 
种 影响 布局 的 事情 大 多 数 时 候 只 是 理论 上 可 行 ， 难 道 没 有 什么 简单 实 
用 的 办 法 吗 ? 这 时 候 ， 我 们 不 妨 试 试 使 用 内 联 元 素 ， 块 级 元 素 设置 
padding-top:50px 会 影响 布局 ， 但 是 内 联 元 素 不 会 ， 于 是 ， 事 情 就 
简单 了 。 假 设 下 面 是 原来 的 实现 : 


<h3 id="hash"> 标 题 </h3> 
h3 { 


line-height: 30px; 
font-size: 14px; 


则 我 们 可 以 将 其 改 成 : 


<h3><span id="hash"> 标 题 </span></h3> 
h3 { 

line-height: 30px; 

font-size: 14px; 


} 
h3 > span { 


padding-top: 58px; 


} 


这 样 既 不 影响 原来 的 布局 和 定位 ， 同 时 又 把 
http://www.cssword.cn/xxxx/#hash 定 位 位 置 往 下 移动 了 50 像 
素 ， 电 不 美 截 ! 


虽然 这 不 是 十 全 十 美的 方法 ,但 是 总 体 性 价 比 还 是 很 不 错 的 。 然 
后 ， 如 果 我 们 的 <h3> 标 签 设 置 overflow:hidden， 则 Chrome 和 
Firefox 浏 览 器 定位 不 受 影响 ， 但 是 下 浏览 器 会 定位 在 <h3> 标 签 位 置 ， 


这 个 需要 六 二 * 


实际 上 ， 对 于 非 震 换 元 素 的 内 联 元 素 ， 不 仅 padding 不 会 加 入 行 
盒 高 度 的 计算 ，margin 和 border 也 都 是 如 此 ， 都 是 不 计算 高 度 ， 但 
实际 上 在 内 联 盒 周 围 发 生 了 演 染 。 


4.2.2 ” padding 的 百分比 值 


天 于 padding 的 属性 值 ， 其 实 没 多 少 好 说 的 。 其 一 ， 和 margin 属 
性 不 同 ，padding 属 性 是 不 文 持 负 值 的 ， 其 二 ，padding 文 持 百 分 比 
值 ， 但 是 ， 和 height 等 属性 的 百分比 计算 规则 有 些 差 异 ， 差 异 在 于 : 
padding 百 分 比值 无 论 是 水 平方 向 还 是 王 直 方向 均 是 相对 于 宽度 计算 
的 ! 


为 何 这 么 设计 呢 ? 首 先 绝对 和 “ 死 循环 ”无 天， 相对 高 度 计算 其 实 
也 没什么 问题 。 我 个 人 狂想， 如 采 垂 直 padding 相 对 于 height 计 算 ， 
大 多 数 情况 下 计算 值 都 是 0， 跟 摆设 没什么 区 别 ， 还 不 如 相对 宽度 计 
算 ， 因 为 CSS 默 认 的 是 水 平流 ， 计 算 值 一 直 会 有 效 ， 而 且 我 们 还 可 以 利 
用 这 一 特性 实现 一 些 有 意思 的 布局 效果 。 也 束 是 面向 场景 和 需求 设 
计 ， 这 种 设计 可 以 让 我 们 轻松 实现 自 适应 的 等 比例 矩形 效果 。 例 如 ， 
使 用 


div { padding: 50%; } 


就 可 以 实现 一 个 正方 形 ， 如 果 这 样 


就 得 到 了 一 个 宽 高 比 为 2:1 的 矩形 效果 。 


网 页 开发 的 时 候 经 常会 有 横贯 整 个 屏幕 的 头 图 效果 ， 我 们 通常 的 
做 法 是 定 高 ， 如 200 像 素 高 ， 屏 幕 小 的 时 候 图 片 两 侧 内 容 隐 藏 。 然 而 ， 
这 种 实现 有 一 个 问题 ， 就 是 类 似 笔记 本 这 样 的 小 屏幕 ， 头 图 高 度 过 高 
会 导致 下 面 主体 内 容 可 能 一 屏 都 实现 不 了 ， 人 但是， 如果 我 们 使 用 
padding 进 行 等 比例 控制 ， 则 小 屏幕 下 头 图 高 度 天 然 等 比例 缩小 ， 没 
有 任何 JavaScript， 却 依然 适 配 民 好 ! 例如 : 


.box { 
padding: 10% 50%; 
position: relative; 


.box > img { 


position: absolute; 
width: 100%; height: 100%; 
left: 0; top: 0; 


束 实 现 了 一 个 宽 高 比 为 5:1 的 比例 固定 的 头 图 效果 ， 上 述 方 法 包括 IE6 在 
内 的 浏览 锅 都 兼容 。 


有 兴趣 可 以 目 己 感受 一 下 ， 手 动 输入 http:/demo.cssworld.cn/4/2- 
3.php 。 改 变 浏 贤 器 宽度 即 可 感受 到 等 比例 的 变化 。 


上 上 面 百分比 值 是 应 用 在 具有 块 状 特性 的 元 素 上 的 ， 如 末 是 内 联 元 
素 ， 会 有 怎样 的 表现 呢 ? 


。 同样 相对 于 宽度 计算 ; 
。 默认 的 高 度 和 宽度 细节 有 差异 ; 
。 padding 会 断 行 。 
我 们 先 来 看 一 下 内 联 元 隶 的 padding 汤 行 ， 代 码 如 下 : 


.box 区 
border: 2px dashed #cd0000; 


} 
span { 


padding: 50%; 
background-color: gray; 


<span> 内 有 文字 若干 </span> 


效果 如 图 4-41 所 示 ( 截 自 Chrome 浏 览 器 ) 。 表 现 诡 异 之 处 有 : “内 
有 ”两 字 不 见 了 , “文字 ”两 字 居 右 显 示 了 ， 背 景区 域 非 矩 形 ， 背 景色 宽 
度 和 外 部 容器 宽度 不 一 致 等 。 


图 4-41 ”内 联 元 素 padding 百 分 比值 的 诡异 表现 


CSS 的 很 多 现象 很 难 解释 ， 原 因 在 于 其 表现 往往 是 多 个 属性 多 个 规 
则 一 起 生效 的 结果 ， 并 非 单一 属性 作用 的 结果 。 例 如 这 里 的 例子 ， 虽 
然 几 乎 没有 什么 实用 价值 ， 但 是 对 于 我 们 次 入 理解 内 联 元 素 的 世界 很 
有 帮助 。 


对 于 内 联 元 素 ， 其 padding 走 会 断 行 的 ， 也 束 生 padding 区 域 宇 
跟着 内 联 盒 模型 中 的 行 框 盒 子 走 的 ， 上 面 的 例子 由 于 文字 比较 多 ， 一 
行 显示 人 不了， 于 是 “ 帮 干 ”两 字 换 到 了 下 一 行 ， 于 是 ， 原 本 的 padding 
区 域 也 跟着 一 起 控 下 来 了 ， 根 据 后 来 大 上 的 层 谷 规则 , “内 有 ”两 字 自 
然 束 正好 被 覆 震 ， 于 是 看 不 见 了 ; 同时 ， 规 则 的 矩形 区 域 因为 换行 ， 
也 变 成 了 五 条 边 ， 至 于 宽度 和 外 部 容器 盒子 不 一 样 宽 ， 那 是 自然 的 ， 
如 采 没 有 任何 文字 内 容 ， 那 目 然 宽度 正好 和 容 喜 一 致 ， 现 在 有 “内 有 文 
字符 干 ”" 这 6 个 字 ， 实 际 宽 度 是 容 需 宽度 和 这 6 个 字 宽 度 的 总 和 ， 换 行 后 
的 宽度 要 想 和 容器 宽度 一 样 ， 那 可 真 要 靠 极 好 的 人 品 了 。 


这 么 一 分 析 ， 上 面 平 时 很 少见 到 的 “诡异 ”现象 就 好 解释 了 。 


事情 还 没完 ， 我 们 再 看 一 个 现象 ， 假 如 是 空 的 内 联 元 素 ， 里 面 没 
有 任何 文字 ， 仅 有 一 个 <span> 标 俭 : 


<span> 内 有 文字 者 干 </span> 


此 时 ， 我 们 会 发 现 居 然 最 终 背 景区 域 的 宽度 和 高 度 是 不 相等 的 
( 见 图 4-42) ， 这 不 科学 啊 ! padding :50% 相 对 宽度 计算 ， 应 该 出 来 
征 个 正方 形 啊 ， 为 何 高 度 要 高 出 一 截 呢 ? 


图 4-42” 空 内 联 元 素 padding 百 分 比值 高 宽 不 一 


原因 其 实 很 简单 : 内 联 元 素 的 垂直 padding 会 让 “幽灵 空白 节 
点 ”显现 ， 也 就 是 规范 中 的 “strut” 出 现 。 

知道 了 原因 ， 要 解决 此 问题 就 简单 了 。 由 于 内 联 元 素 默 认 的 高 度 
完全 受 font-size 大 小 控制 ， 因 此 ， 我 们 只 


span { 
padding: 50%; 


font-size: 0; 
background-color: gray; 


此 时 ，* 幽 灵 空 白 节点 "高 度 变 成 了 9， 高 和 寅 就 会 一 样 ， 和 块 状元 
素 一 样 的 正方 形 就 出 现 了 。 


可 以 看 到 ， 内 联 盒 模型 的 理论 知识 对 我 们 理解 内 联 元 素 的 各 种 表 
现 是 非 第 有 价值 的 。 这 种 理解 纯 靠 实践 ， 想 破 脑 安 都 不 会 想 明 日 为 什 
么 会 这 样 。 所 以 ， 进 行 深度 学 习 是 很 有 必要 的 。 


4.2.3 ”标签 元 素 内 置 的 padding 
说 一 下 你 可 能 不 知道 的 天 于 padding 的 一 些小 秘密 。 


(1) oJ/ul 列 表 内 置 padding-left， 但 是 单位 是 px 不 是 em。 例 
如 ，Chrome 浏 贤 器 下 是 40px， 由 于 使 用 的 是 px 这 个 绝对 单位 ， 因 此 ， 
如 果 列 表 中 的 font -size 大 小 很 小 ， 则 <1i> 元 素 的 项 目 符号 (如 点 或 
数字 ) 就 会 <ul>/<01> 元 素 的 左边 缘 距离 很 开 ， 如 果 font - size 比较 
大 ， 则 项 目 符号 可 能 跑 到 <ul>/<o1> 元 素 的 外 面 ， 类 似 图 4-43 所 示 的 
情况 。 


1. ol/li 元 素 内 置 padding-left , 但 
是 单位 是 px 不 是 em ，; 


图 4-43 ”项 目 符号 跑 到 <o1> 外 部 


根据 我 自己 的 经 验 ， 当 font-size 是 12px 至 14px 时 ，22px 是 比 
较 好 的 一 个 padding-1left 设 定 值 ， 所 有 浏 贤 器 都 能 正常 显示 ， 且 非 
常 贴近 边缘。 


ol, ul { 
padding-left: 22px; 
} 


当然 ， 如 有 果 视 觉 要 求 比较 高 ， 使 用 content 计 数 器 模拟 则 是 更 好 
的 选择 。 


(2) 很 多 表单 元 素 都 内 置 padding， 例 如 : 


。 所 有 浏览 器 <input>/<textarea> 输 入 框 内 置 padding: 

。 所 有 浏览 器 <button> 按 钮 内 置 padding; 

。 部 分 浏览 器 <select> 下 拉 内 置 padding， 如 Firefox、IE8 及 以 上 
版 本 浏览 器 可 以 设置 padding; 

。 所 有 浏览 器 <radio>/<chexkbox> 单 复 选 框 无 内 置 padding; 

<button> 按 钮 元 素 的 padding 最 难 控制 ! 


我 们 着 重 看 一 下 <button> 按 钮 元 素 的 padding。 在 Chrome 浏 览 
器 下 ， 我 们 设置 : 


按钮 的 padding 丈 变 成 了 9， 但 是 在 Firefox 浏 览 硕 下 ， 左 右 依然 有 
padding， 如 图 4-44 所 示 。 可 以 试 试 使 用 : 


button::-moz-focus-inner { padding: 0; } 


此 时 按钮 束 会 如 图 4-45 所 示 。 


图 4-44 ”Firefox 按 钮 padding : 9 效果 有 限 


图 4-45 ”Firefox 按 钮 padding 去 除 后 的 效果 


而 在 IE7 浏 咒 絮 下 ， 文 字 如 琳 变 多 ， 那 么 左右 padding 隶 渐变 大 ， 
如 图 4-46 所 示 。 需 要 进行 如 下 设置 : 


button { overflow: visible; } 


此 时 按钮 表现 符合 预期 ， 如 图 4-47 所 示 。 


”上 胺 钮 按钮 按钮 按钮 | “| 


图 4-46 ”按钮 文字 越 多 padding 越 大 


按钮 按钮 按钮 按钮 


图 4-47 ”按钮 padding 大 小 不 受 文 字 个 数 的 影响 


最 后 ， 按 钮 padding 与 高 度 计算 不 同 浏览 器 下 千差万别 ， 例 如 : 


button { 


line-height: 20px; 
padding: 10px; 
border: none; 


} 


结果 ， 在 Chrome 浏 多 器 下 是 预期 的 40 像 素 ， 然 而 Firefox 浏 览 絮 下 是 葛 
名 其 妙 的 42 像 素 ， 在 IE7 浏 贤 颖 下 更 是 罪 夷 所 思 的 45 像 素 ， 这 使 我 们 平 
常 制 作 网 页 的 时 候 很 少 使 用 原生 的 <button> 按 钮 作为 点 击 按钮 ， 而 是 
使 用 <a> 标 签 来 模拟 。 但 是 ， 在 表单 中 ， 有 了 时候 按 钮 是 目 市 交互 行为 

的 ， 这 是 <a> 标 签 无 法 模拟 的 。 我 这 里 给 大 家 推荐 一 个 既 语义 民 好 行为 
保留 ， 同 时 UI 效果 棱 兼 容 效 果 好 的 实现 小 拉 巧 ， 那 束 古 使 用 <label> 
元 素 ，HTML 和 CSS 如 下 : 


<button id="btn"></button> 
<label for="btn"> 按 钮 </label> 


button { 
position: absolute; 
clip: rect(0 0 0 0); 


label f{ 
display: inline-block; 
line-height: 20px; 
padding: 10px; 


<1abe1> 元 素 的 for 属 性 值 和 <button> 元 素 的 Id 值 对 应 即 可 。 
此 时 ， 所 有 浏览 器 下 的 按钮 高 度 都 是 40 像 素 ， 而 且 <button> 元 素 的 行 
为 也 都 保留 了 ， 是 非常 不 错 的 实践 技巧 。 


4.2.4_ padding 与 图 形 绘制 


padding 属 性 和 background-c1lip 属 性 配合 ， 可 以 在 有 限 的 标 
签 下 实现 一 些 CSS 图 形 绘制 效果 ， 我 这 里 抛砖引玉 ， 举 两 个 小 例子 ， 重 
在 展示 可 行 性 。 


例 1: 不 使 用 伪 元 素 ， 仅 一 层 标 签 实现 大 队长 的 “三 道 杠 ?分 类 图 标 
效果 。 此 效果 在 移动 端 比 较 弟 见 ， 类 似 于 图 4-48 最 右边 的 小 图 标 。 


图 4-48“ 三 道 杠 ”小 图 标示 意 


我 们 可 以 使 用 类 似 下 面 的 CSS 代 码 〈10 倍 大 小 模拟 ) 实现 : 


.icon-menu { 
display: inline-block; 
width: 140px; height: 10px; 
padding: 35px 0; 
border-top: 10px solid; 


border-bottom: 10px solid; 


background-color: currentColor; 
background-clip: content-box; 


例 2: 不 使 用 伪 元 素 ， 仅 一 层 标 签 实现 双 层 圆 点 效果 。 此 效 末 在 移 
动 端 也 比较 利 见 ， 类 似 于 图 4-49， 在 多 个 广告 图 片 切换 时 ， 用 来 标识 当 
前 显示 的 古 哪 张 图 。 


图 4-49 ” 双 层 圆 点 图 形 示 意 


我 们 可 以 使 用 类 似 下 面 的 CSS 代 码 〈10 倍 大 小 模拟 ) 实现 : 


.icon-dot { 


下 
可 。 


display: inline-block; 
width: 100px; height: 100px; 
padding: 10px; 

border: 10px solid; 


border-radius: 50%; 
background-color: currentColor; 
background-clip: content-box; 


这 两 个 例子 实现 的 图 形 效 果 如 图 4-50 所 示 。 有 兴趣 可 以 自己 感受 一 
手动 输入 http://demo.cssworld.cn/4/2-4.php 或 者 扫 下 面 的 二 维 码 即 


图 4-50 “三 道 杠 > 和 双 层 圆 点 图 形 效 果 


4.3 激进 的 margin 属 性 


padding 性 格 温 和 ， 负 责 内 间距 ; 而 mnargin 则 比较 激进 ， 负 责 外 
间距 。 虽 然 都 是 间距 ， 但 是 差别 相当 大 ， 尤 其 是 mnargin， 特 异 之 处 相 
当 多 。 


4.3.1 _ margin 与 元 素 尺寸 以 及 相关 布局 
1. 元 素 尺 寸 的 相关 概念 


下 面 的 内 容 会 牵扯 到 各 类 包 人 台 “ 矿 才 ? 字 样 的 名 词 ， 为 了 大 家 在 阅 


读 的 时 候 不 产生 困扰 ， 这 里 专门 把 相关 概念 梳理 一 下 。 


我 们 这 里 的 各 类 “ 太 寸 ”命名 和 对 应 的 盒 于 类 型 全 部 参考 日 jQuery 中 


与 尺寸 相关 API 的 名 称 。 


数 


元 素 尺寸 ， 对 应 jQuery 中 的 $( ) .width() 和 $() ,height() 方 
法 ， 包 括 padding 和 border， 也 就 是 元 叉 的 border box 的 尺寸 。 
在 原生 的 DOM API 中 写作 offsetwidth 和 offsetHeight， 所 
以 ， 有 时 候 也 成 为 “元 素 偏 移 尺 寸 ”。 

元 素 内 部 尺寸 : 对 应 jQuery 中 的 $( ) .innerwidth() 和 

$( ).innerHeight() 方 法 ， 表 示 元 素 的 内 部 区 域 尺 寸 ， 包括 
padding 但 不 包括 border， 也 束 是 元 素 的 padding box 的 尺寸 。 在 
原生 的 DOM API 中 写作 clientwidth 和 clientHeight， 所 
以 ， 有 时 候 也 称 为 “元 素 可 视 尺 寸 ”。 

元 素 外 部 尺寸 ， 对 应 jQuery 中 的 $( ) .outerwidth(true) 和 
$() .outerHeight(true) 方 法 ， 表 示 元 素 的 外 部 尺寸 ,不 仅 包 
括 padding 和 border， 还 包括 margin， 也 残 是 元 素 的 margin 
box 的 尺寸 。 没 有 相对 应 的 原生 的 DOM API。 


“外 部 尺寸 "有 个 很 不 一 样 的 特性 ， 束 是 尺寸 的 大 小 有 可 能 是 负 
没 蚀 ， 人 负 尺 寸 。 这 和 我 们 现实 世界 对 尺寸 的 认 知 明显 冲突 了 ， 因 


为 现实 世界 没有 什么 物体 的 尺寸 是 负 的 。 所 以 ,我 总 是 把 “外 部 尺 
寸 ” 理 解 为 “元 素 占 据 的 空间 尺寸 "， 把 概念 从 “尺寸 "转换 到 “空间 ”， 这 
时 候 束 容易 理解 多 了 。 


2. margin 与 元 素 的 内 部 尺寸 


margin 同 样 可 以 改变 元 素 的 可 视 尺 寸 ， 但 是 和 padding 儿 平 是 互 
补 态 势 。 什 么 意思 呢 ? 对 于 padding， 元 素 设 定 了 width 或 者 保持 “ 包 
右 性 ”的 时 候 ， 会 改变 元 陛 可 视 扩 寸 ; 但 是 对 于 margin 则 相反 ， 元 素 
设 定 了 width 值 或 者 保持 “ 包 右 性 ”的 时 候 ，margin 对 尺寸 没有 影响 ， 
只 有 元 素 是 “充分 利用 可 用 空间 ”状态 的 时 候 ，margin 才 可 以 改变 元 素 
的 可 视 尺 寸 。 


比方 说 ， 如 下 CSS: 


.father { 
width: 300px; 


margin: © -20px; 


此 时 元 素 宽 度 还 是 300 像 素 ， 尺 寸 无 变化 。 因 为 只 要 宽度 设 定 ， 
margin 束 无 法 改变 元 素 尺 寸 ， 这 和 padding 是 不 一 样 的 。 


但 是 ， 如 果 是 下 面 这 样 的 HTML 和 CSS: 


<div class="father"> 
<div class="son"></div> 
</div> 


father { width: 300px; } 
,SOn { margin: © -20px; } 


则 son 元素 的 宽度 就 是 340 像 素 了 ， 尺 寸 通 过 负 值 设置 变 大 了 ， 因 为 
此 时 的 宽度 表现 是 “充分 利用 可 用 空间 ”。 


或 者 这 么 说 吧 ， 只 要 元 素 的 尺寸 表现 符合 “充分 利用 可 用 空间 ”， 
无 论 是 垂直 方 癌 还 是 水 平方 向 ， 都 可 以 通过 margin 改 变 斥 寸 。 


CSS 世 界 默认 的 流 方向 是 水 平方 向 ， 因 此 ， 对 于 普通 流体 元 素 ， 
margin 只 能 改变 元 素 水 平方 加 尺寸 但 是 ， 对 于 具有 拉 伸 特性 的 绝对 
定位 元 素 ， 则 水 平 或 垂直 方向 都 可 以 ， 因 为 此 时 的 尺寸 表现 人 符合 “充分 
利用 可 用 空间 ”。 这 在 4.3.4 太 会 继续 深入 。 


由 于 margin 具 有 这 种 流体 特性 下 的 改变 尺寸 特性 ， 因 此 ， 
margin 可 以 很 方便 地 实现 很 多 流体 布局 效果 。 例 如 ， 一 侧 定 宽 的 两 栏 
目 适 应 布局 效果 ， 假 设 我 们 定 寓 的 部 分 是 128 像 素 宽 的 图 片 ， 目 适应 的 


部 分 是 文字 。 


(1) 如 果 图 片 左 侧 定位 : 


.box { overflow: hidden; } 

.box > img { float: left; } 

.box > p { margin-left: 140px; } 
<div class="box"> 


<img src="1.jpg"> 
<p> 文 字 内 容 ., .</p> 
</div> 


此 时 ， 文 字 内 容 吏 会 根据 . box 盒子 的 宽度 变化 而 目 动 排列 ， 形 成 目 适 
应 布局 效 末 ， 无 论 盒 于 是 200 像 素 还 是 400 像 素 ， 布 局 依然 展 好 ， 不 会 
像 纯 浮动 布局 那样 发 生 错 位 。 


(2) 如 果 图 片 右 侧 定位 : 只 要 图 片 的 左 浮动 改 成 右 浮动 ， 文 字 内 
容 的 左 margin 改 成 右 margin 即 可 。 


.box { overflow: hidden; } 


.box > img { float: right; } 
,box > p { margin-right: 140px; } 


HTML 和 上 面 的 左 侧 定位 效果 一 模 一 样 ， 最 终 实 现 的 也 是 一 个 效果 
展 好 的 自 适 应 布局 。 然 而 ， 这 里 的 实现 有 一 点 瑕 兹 ， 那 就 是 元 素 在 
DOM 文 档 流 中 的 前 后 顺序 和 视觉 表现 上 的 前 后 顺序 不 一 致 。 什 么 意思 
呢 ? 我 们 这 里 的 图 片 是 右 浮动 ， 视 觉 表 现在 .box 的 右 侧 ， 但 是 图 片 相 
天 的 HTML 代 码 却 在 前 面 。 这 个 相反 的 位 置 天 系 有 时 候 会 给 其 他 同事 造 
成 一 些 困 难 。 所 以 ， 如 果 想 要 实现 顺序 完美 一 致 的 自 适应 效果 ， 可 以 
音 助 margin 负 值 定 位 实现 。 


(3) 如 有 果 图 片 右 侧 定 位 ， 同 时 顺序 一 致 


.box { overflow: hidden; } 
full { width: 100%; float: left; } 
.box > img { float: left; margin-left: -128px; } 


full > p { margin-right: 140px; } 
<div class="box"> 
<div class="full"> 
<p> 文 字 内 容 .. .</p> 
</div> 
<img src="1.jpg"> 
</div> 


如 果 对 以 上 3 种 实现 效果 有 兴趣 ， 可 以 手动 输入 
http://demo.cssworld.cn/ 4/3-1.php 或 者 扫 右 侧 的 二 维 码 。 


我 们 还 可 以 利用 margin 改 变 元 素 尺 寸 的 特性 来 实现 两 端 对 齐 布 局 
效 末 。 列 表 是 我 们 Web 开 发 中 是 非常 常见 的 ， 一 般 都 是 通过 循环 饥 历 呈 
现 出 来 的 ， 也 就 是 实际 上 每 个 列表 的 HTML 样 式 都 是 一 致 的 。 现 在 有 这 
样 一 个 需求 : 列表 块 两 端 对 齐 ， 一 行 显示 3 个 ， 中 间 有 2 个 20 像 素 的 间 
除 。 假 如 我 们 使 用 译 动 来 实现 ，CSS 代 码 可 能 是 下 面 这 样 : 


1i { 
float: left; 
width: 100px; 


margin-right: 20px; 


此 时 就 遇 到 了 一 个 问题 ， 即 最 右 侧 永 远 有 个 20 像 素 的 间 际 ， 无 法 
完美 实现 两 端 对 齐 ， 如 图 4-51 所 示 。 
列表 2 列表 3 
7 
捍 不 去 的 间 际 


图 4-51 ” 右 侧 间 际 示意 
如 果 不 考 虚 IE8， 我 们 可 以 使 用 CSS3 的 nth-of-type 选 择 器 : 


li:nth-of-type(3n) { 
margin-right: 0; 


但 如 果 需 要 兼容 IE8 那 么 nth-of-type 就 无 能 为 力 了 。 要 么 专门 
使 用 JavaScript 打 个 补丁 ， 要 么 列表 HTML 输出 的 时 候 给 符合 3n 的 <1i> 
标签 加 个 类 名 。 例 如 .1i-third: 


.1i-third { 


margin-right: 0; 


然而 这 种 技术 选 型 ， 需 要 HTML 交 辑 和 CSS 样 式 相互 配合 才能 
效 ， 相 比 纯 CSS 控 制 而 言 后 期 风险 和 维护 成 本 提高 了 一 倍 ， 那 有 没有 更 
好 的 实现 方法 呢 ? 


有 ! 我 们 可 以 通过 给 父 容器 添加 margin 属 性 ， 增 加 容器 的 可 用 宽 
度 来 实现 。 


ul { 
margin-right: -20px; 


} 

UL > 1i 1{ 
float: left; 
width: 100px; 
margin-right: 20px; 


此 时 <ul> 的 宽度 就 相当 于 1006%+20px， 于 是 ， 第 3n 的 <1i> 标 签 
的 margin-right: 20px 就 多 了 20 像 素 的 使 用 空间 ， 正 好 列表 的 右边 
缘 就 是 父 级 <ul> 容 器 100% 宽 度 位 置 ， 两 端 对 齐 效 果 就 此 实现 了 ， 如 图 
4-52 所 示 。 


列表 2 列表 3 
= 


父 级 尝 走 间 降 


- 


图 4-52 石 侧 间 阶 被 父 容器 高 走 了 
3. margin 与 元 素 的 外 部 尺寸 


下 


对 于 普通 块 状元 素 ， 在 默认 的 水 平流 下 ，margin 只 能 改变 左右 方 
向 的 内 部 尺寸 ， 垂 直方 向 则 无 法 改变 。 如 果 我 们 使 用 writing-mode 
改变 流向 为 垂直 流 ， 则 水 平方 向 内 部 尺寸 无 法 改变 ， 垂 直方 向 可 以 改 
变 。 这 是 由 margin:auto 的 计算 规则 决定 的 。 


但 是 ， 对 于 外 部 尺寸 ,margin 属性 的 影响 则 更 为 广泛 ， 只 要 元 素 
具有 块 状 特性 ， 无 论 有 没有 设置 width/height， 无 论 是 水 平方 向 还 
是 垂直 方向 ， 即 使 发 生 了 margin 合 并 ，margin 对 外 部 尺寸 都 着 着 实 
实 发 生 了 影响 。 只 是 很 多 时 候 ， 抛 开 定 位 而 言 ， 我 们 似乎 对 外 部 尺寸 
的 变化 不 是 很 敏感 ， 实 际 上 ，CSS 世 界 中 不 少 来 手 的 问题 都 是 需要 借助 
margin 的 外 部 尺寸 特性 来 实现 的 。 


前 面 讲 padding 的 时 候 ， 我 们 说 过 它 没 有 什么 兼容 性 问题 。 实 际 
上 ，padding 是 有 不 兼容 的 ， 只 是 这 个 不 兼容 不 常 遇 到 ， 即 使 遇 到 ， 
也 很 容易 被 不 太 敏 感 的 人 “一 笔 带 过 ”。 此 兼容 问题 描述 为 ， 如 果 容 器 
可 以 竣 动 ， 在 IE 和 Firefox 浏 览 器 下 是 会 忽略 padding-bottom 值 的 ， 
Chrome 等 浏览 絮 则 不 会 。 也 就 是 说 ， 在 IE 和 Firefox 浏 唤 妖 下 


<div style="height:100px; padding:50px 0;"> 


<img src="0.jpg" height="300"> 
</div> 


底部 没有 50 像 素 的 padding-bottom 间 际 ， 如 图 4-53 所 示 。 


图 4-53 padding-bottom 被 滚动 容器 忽略 


此 兼容 性 差异 的 本 质 区 别 在 于 :Chrome 浏览 器 是 子 元素 超 过 
content box 尺 二 触发 滚动 条 显示 ， 而 下 和 Firefox 浏 拓 吉 是 超过 padding 
box 尺 才 触 发 滚动 条 显示 。 


由 于 规范 中 并 没有 找到 准确 的 说 明 ， 因 此 ， 浏 览 右 之 间 不 同 的 做 
法 不 能 说 就 对 高 错 ， 可 以 看 成 是 一 种 “未 定义 行为 >。 一 般 而 言 ， 开 发 
人 员 更 喜欢 Chrome 的 做 法 ， 因 为 其 更 好 理解 。 总 之 ， 不 管 怎 样 ， 滚 动 


容器 底部 留 白 使 用 padding 是 不 推荐 的 ， 因 为 兼容 性 是 个 大 问题 。 但 
我 们 可 以 借助 margin 的 外 部 尺寸 特性 来 实现 底部 留 日 ， 代 码 如 


是 ， 
请; 


<div style="height:200px;"> 


<img height="300" style="margin:50px 0;"> 
</div> 


结 采 所 有 浏 贤 紫 部 成 功 留 日 ， 如 图 4-54 所 示 。 


1 


图 4-54 _ margin-bottom 滚 动 留 白 


记 住 了 ， 只 能 使 用 子 元 素 的 margin-bottom 来 实现 滚动 容器 的 底 


部 留 白 。 


下 面 再 举 一 个 利用 margin 外 部 尺寸 实现 等 高 布局 的 经 典 案例 。 此 
布局 多 出 现在 分 栏 有 青 景色 或 者 中 间 有 分 隅 线 的 布局 中 ， 有 可 能 左 侧 
栏 内 容 多 ， 也 有 可 能 右 侧 栏 内 容 多 ， 但 无 论 内 容 多 少 ， 两 栏 冯 景 色 痢 
和 容器 一 样 高 。 


由 于 height :100% 需 要 在 父 级 设 定 具 体高 度 值 时 才 有 效 ， 因 此 我 
们 需要 使 用 其 他 技巧 来 实现 。 方 法 其 实 很 多 ， 例 如 使 用 
display:table-cell 布 局 ， 左 右 两 栏 作为 单元 格 处 理 ， 或 者 使 用 
border 边 框 来 模拟 ， 再 或 者 使 用 我 们 这 里 的 margin 负 值 实现 ， 核 心 
CSS 代 码 如 下 : 


.COlumn-box { 
overflow: hidden; 


.COolumn-left, 


.COlumn-right { 
margin-bottom: -9999px; 
padding-bottom: 9999px; 


要 看 演示 效果 ， 可 以 手动 输入 http://demo.cssworld.cn/4/3-2.php 或 者 


扫 下 面 的 二 维 码 。 点 击 按钮 增 减 左右 两 栏 的 内 容 改变 高 度 就 会 发 现 ， 
无 论 是 左 侧 内 容 多 还 是 右 侧 内 容 多 ， 两 栏 的 背景 高 度 都 是 一 样 的， 如 


图 4-55 所 示 。 


图 4-55 


等 高 布 


1 ee > 
人 仆 局 


司 并 


下 面 问题 来 了 : 为 什么 可 以 实现 等 高 呢 ? 


垂直 方向 margin 无 法 改变 元 素 的 内 部 尺寸 ， 但 却 能 改变 外 部 尺 
寸 ， 这 里 我 们 设置 了 margin-bottom: -9999px 意 味 着 元 素 的 外 部 尺 
二 在 垂直 方向 上 小 了 9999px。 默 认 情 况 下 ， 垂 直方 向 块 级 元 素 上 下 距 
离 是 0o， 一 旦 margin-bottom: -9999px 就 意味 着 后 面 所 有 元 素 和 上 
面 元 素 的 空间 距离 变 成 了 -9999px， 也 就 是 后 面 元 素 都 往 上 移动 了 
9999px。 此 时 ， 通 过 神 来 一 笔 padding-bottom:9999px 增 加 元 素 
高 度 ， 这 正 负 一 抵消 ， 对 布局 层 并 无 影响 ， 但 却 带 来 了 我 们 需要 的 东 
西 一 一 视觉 层 多 了 9999px 高 度 的 可 使 用 的 背景 色 。 但 是 ，9999px 大 
大 了 ， 所 以 需要 配合 父 级 overflow:hidden 把 多 出 来 的 色 块 背景 隐 
藏 掉 ， 于 是 实现 了 视觉 上 的 等 高 布局 效果 。 


使 用 margin 负 值 实现 等 高 布局 的 优势 在 于 兼容 性 足够 ，IE6 浏 宽 
器 也 文 持 ， 且 文 持 任 意 个 分 栏 等 高 布局 。 本 例 中 ，padding- 
bottom:9999px 也 可 以 用 border-bottom: 9999px solid 
transparent 代 赫 ， 不 过 IE7 以 上 浏 斋 器 才 文 持 。 大 家 可 以 根据 实际 
场景 选择 使 用 。 


不 过 ，margin 负 值 实现 等 高 布局 也 有 不 足 之 处 : 首先 ， 如 果 需 要 
有 子 元 素 定位 到 容器 之 外 ， 父 级 的 overflow:hidden 是 一 个 环 手 的 
限制 ， 其 次 ， 当 触发 销 点 定位 或 者 使 用 DOM.scrollIntoview() 方 
法 的 时 候 ， 可 能 束 会 出 现 奇怪 的 定位 问题 ， 根 本 原因 参见 6.4 节 。 


顺便 说 说 使 用 border 和 table-ce1l11 的 优 缺 点 : 前 者 优势 在 于 兼 
容 性 好 ， 没 有 销 点 定位 的 隐患 ， 不 足 之 处 在 于 最 多 3 栏 ， 且 由 于 
border 不 支持 百分比 宽度 ， 因 此 只 能 实现 至 少 一 侧 定 宽 的 布局 ; 


tab1le-cel11 的 优点 是 天 然 等 高 ， 不 足 在 于 IE8 及 以 上 版 本 浏览 器 才 文 
持 ， 所 以 ， 如 果 项 目 无 须 兼容 IE6、IE7， 则 推荐 使 用 table-cell 实 


上 述 margin 对 尺寸 的 影响 是 针对 具有 块 状 特性 的 元 素 而 言 的 ， 对 
于 纯 内 联 元 素 则 不 适用 。 和 padding 不 同 ， 内 联 元 素 垂 直方 向 的 
margin 是 没有 任何 影响 的 ， 既 不 会 影响 外 部 尺寸 ， 也 不 会 影响 内 部 尺 
寸 ， 有 种 石沉大海 的 感觉 。 对 于 水 平方 向 ， 由 于 内 联 元 素 宽 上 度 表 现 
为 “ 包 右 性 ”， 也 不 会 影响 内 部 尺寸 。 


4.3.2 ” margin 的 百分比 值 


和 padding 属 性 一 样 ，margin 的 百分比 值 无 论 是 水 平方 向 还 是 垂 
直方 加 都 是 相对 于 宽度 计算 的 。 不 过 相对 于 padding，margin 的 百 分 
比值 的 应 用 价值 束 低 了 一 截 ， 根 本 原因 在 于 和 padding 不 同 ， 元 素 设 
置 margin 在 垂直 方向 上 无 法 改变 元 素 自 身 的 内 部 尺寸 ， 往 往 需 要 父 元 
素 作为 载体 ， 此 外 ， 由 于 margin 合 并 的 存在 ， 垂 直方 向 往往 需要 双 倍 
尺寸 才能 和 padding 表 现 一致 。 例 如 : 


.box { 
background-color: olive; 
overflow: hidden; 


,box > div { 
margin: 50%; 


} 

<div class="box"> 
<div></div> 

</div> 


结果 .box 是 一 个 宽 高 比 为 2:1 的 橄榄 绿 长 方形 。 是 不 是 有 点 儿 奇 怪 : 
509%6+50% 应 该 是 100%， 应 该 上 下 一 样 ， 是 1:1 的 正方 形 ， 怎 么 最 后 是 
2:1 的 长 方形 呢 ? 

这 就 涉及 下 面 一 节 margin 合 并 的 内 容 了 。 
4.3.3 ”正确 看 竺 CSS 世界 里 的 margin 合 并 
1. 什么 是 margin 合并 

块 级 元 素 的 上 外 边 距 (margin-top) 与 下 外 边 距 (margin- 
bottom) 有 时 会 合并 为 单个 外 边 距 ， 这 样 的 现象 称 为 "margin 合 
并 ”。 从 此 定义 上 ， 我 们 可 以 捕获 两 点 重要 的 信息 。 

(1) 块 级 元 素 ， 但 不 包括 浮动 和 绝对 定位 元 素 ， 尽 管 浮动 和 绝对 
定位 可 以 让 元 素 块 状 化 。 

(2) 只 发 生 在 垂直 方向 ， 需 要 注意 的 是 ， 这 种 说 法 在 不 考虑 
writing-mode 的 情况 下 才 是 正确 的 ， 严 格 来 讲 ， 应 该 是 只 发 生 在 和 
当前 文档 流 方向 的 相 垂直 的 方向 上 。 由 于 默认 文档 流 是 水 平流 ， 因 此 
发 生 margin 合 并 的 就 是 垂直 方 各 。 

2. margin 合 并 的 3 种 场景 
margin 合 并 有 以 下 3 种 场景 。 

(1) 相 邻 兄弟 元 素 margin 合 并 。 这 是 margin 合 并 中 最 常见 、 最 
基本 的 ， 例 如 : 


p { margin: 1em 0; } 
<p> 第 一 行 </p> 
<p> 第 二 行 </p> 


则 第 一 行 和 第 二 行 之 间 的 间距 还 是 lem， 因 为 第 一 行 的 margin- 
bottom 和 第 二 行 的 margin-top 合 并 在 一 起 了 ， 并 非 上 下 相 加 。 


(2) 父 级 和 第 一 个 /最 后 一 个 子 元 素 。 我 们 直接 看 例子 ， 在 默认 状 
仿 下 ， 下 面 3 种 设置 古 等 效 的 : 


<div class="father"> 
<div class="son" style="margin-top:80px;"></div> 
</div> 


<div class="father" style="margin-top:80px;"> 
<div class="son"></div> 
</div> 


<div class="father" style="margin-top:80px;"> 
<div class="son" style="margin-top:80px;"></div> 
</div> 


在 实际 开发 的 时 候 ， 给 我 们 市 来 麻烦 的 多 半 束 是 这 里 的 父子 


margin 合 并 。 


比方 说 ， 现 在 流行 官网 使 用 一 张 帅 是 的 大 图 ， 然 后 配 上 大 大 的 网 
站 标题 。 由 于 这 个 标题 一 般 在 头 图 中 间 的 某 位 置 ， 因 此 ， 我 们 很 自然 
会 想到 使 用 margin-top 定 位 ， 然 后 问题 束 来 了 。 因 为 发 生 了 “和 奇 
怪 ” 的 事情 ， 头 图 居然 掉 下 来 了 ! 针对 此 现象 ， 我 特意 制作 了 一 个 实 
例 ， 手 动 输入 http://demo.cssworld.cn/ 4/3-3.php 或 者 扫 右 侧 的 二 维 码 。 


问题 产生 的 原因 就 是 这 里 的 父子 margin 合 并 。 这 里 大 家 需要 理 清 
楚 “ 合 并 ”这 个 概念 。 如 果 我 们 按照 中 文 释义 理解 ， 应 该 必须 有 多 个 对 
象 才 能 进行 合并 ， 否 则 根本 就 没有 “ 合 ” 这 一 说 ， 确 实 如 此 。 但 是 ， 这 
样 理解 也 有 可 能 会 带 来 这 样 一 个 误区 ， 即 你 要 出 点 儿 力 ， 我 要 出 点 儿 
力 ， 才 叫 “ 合 "， 其 实 不 然 。 放 到 我 们 这 里 ， 这 个 父子 margin 合 并 的 案 
例 上 就 是 ， 父 元 素 没有 出 一 点 力 ， 子 元 素 出 了 全 部 的 力 ， 然 后 最 终 的 
margin 全 部 合 到 了 父 元 素 上 。 也 就 是 虽然 是 在 子 元 素 上 设置 的 
margin-top， 但 实际 上 残 等 同 于 在 父 元 素 上 设置 了 margin-top， 
我 想 这 样 大 家 就 能 理解 为 何 头 图 会 挥 下 来 了 吧 。 但 是 有 一 点 需要 注 
意 ,， “等同 于 ”并 不 是 “就 是 ”的 意思 ， 我 们 使 用 getComputedStyle 方 
法 获取 父 元 素 的 margin-top 值 还 是 CSS 属 性 中 设置 值 ， 并 非 margin 
合并 的 表现 值 。 


那 该 如 何 阻 止 这 里 margin 合 并 的 发 生 呢 ? 


对 于 margin-top 合 并 ， 可 以 进行 如 下 操作 〈 满 足 一 个 条 件 即 
可 ) : 


大和 


素 设置 为 块 状 格式 化 上 下 文 元 素 ; 

素 设 置 border -top 值 ; 

父 元 素 设 置 padding-top 值 ; 

父 元 素 和 第 一 个 子 元 素 之 间 添 加 内 联 元 素 进 行 分 隔 。 


pp 


对 于 margin-bottom 合 并 ， 可 以 进行 如 下 操作 (满足 一 个 条 件 即 


入 


入 


素 设 置 为 块 状 格 式 化 上 下 文 元 素 ; 

素 设 置 border -bottom 值 ; 

元 素 设 置 padding-bottom 值 ; 

父 元 素 和 最 后 一 个 子 元 素 之 间 添 加 内 联 元 素 进 行 分 隔 ; 
父 元 素 设 置 height、min-height 或 nax-height。 


元 


入 


> 


入 


所 以 ， 上 面 因 为 nargin 合 并 导致 尖 图 挥 下 来 的 问题 可 以 添加 下 面 


的 CSS 代 码 进 行 修复 : 


.Ccontainer { 
overflow: hidden; 
} 


其 原理 就是 通过 设置 overflow 属 性 让 父 级 元 素 块 状 格式 化 上 下 文 ， 这 
在 6.4 人 会 有 深入 的 探讨 。 


说 到 此 处 ， 妨 不 住 再 多 说 儿 句 。jQuery 中 有 个 


$().slideUp()/$().slideDown() 方 法 ， 如 果 在 使 用 这 个 动画 效 
果 的 时 候 ， 发 现 这 内 容 在 动画 开始 或 结束 的 时 候 会 跳 一 下 ， 那 八 九 不 


离 十 束 是 布局 存在 margin 合 并 。 跳 动 之 所 以 产生 ， 束 是 因为 jQuery 的 


slideUp 和 slideDown 方 法 在 执行 的 时 候 会 被 对 象 元 素 添加 
overf1low:hidden 设 置 ， 而 overflow:hidden 会 阻 上 margin 合 


并 ， 于 是 一 瞬间 间距 变 大 ， 产 生 了 跳动 。 


(3) 空 块 级 元 素 的 margin 合 并 。 例 如 ， 下 面 CSS 和 HTML 代 码 : 


,father { overflow: hidden; } 
,SOn { margin: 1em 0; } 
<div class="father"> 


<div class="son"></div> 
</div> 


结果 ， 此 时 ,father 所 在 的 这 个 父 级 <div> 元 素 高 度 仅 仅 是 1em， 

为 ,Son 这 个 空 <div> 元 素 的 margin-top 和 margin-bottom 合 并 在 
一 起 了 。 这 也 是 上 一 节 margin:50% 最 终 宽 高 比 是 2:1 的 原因 ， 因 为 垂 
直方 向 的 上 下 margin 值 合 二 为 一 了 ， 所 以 垂直 方向 的 外 部 尺寸 只 有 水 
平方 向 的 一 半 。 


这 种 空 块 级 元 素 的 margin 合 并 特性 即使 目 喘 没有 设置 margin 也 
是 会 发 生 的 ， 所 谓 “ 合 ”并 不 一 定 要 自己 出 力 ， 只 要 出 人 就 可 以 。 比 方 
说 ， 我 们 一 开始 的 “ 相 邻 兄弟 元 素 margin 合 并 ， 其 实 ， 就 算 兄 弟 不 相 
邻 ， 也 是 可 以 发 生 合并 的 ， 前 提 是 中 间 插 手 的 也 是 个 会 合并 的 家 伙 。 
比方 说 : 


p { margin: 1em 0; } 
<p> 第 一 行 </p> 


<div></div> 
<p> 第 二 行 </p> 


此 时 第 一 行 和 第 二 行 之 间 的 距离 还 是 1em， 中 间 看 上 去 隔 了 一 个 <div> 
元 素 ， 但 对 最 终 效 果 却 没有 任何 影响 。 如 有 打非 要 细 究 ， 则 实际 上 这 里 


发 生 了 3 次 margin 合 并 ，<div> 和 第 一 行 <p> 的 margin-bottom 合 
并 ， 然 后 和 第 二 行 <p> 的 margin-top 合 并 ， 这 两 次 合并 是 相 邻 兄弟 合 
并 。 由 于 目 身 是 至 <div>， 于 是 前 两 次 合并 的 margin-bottom 和 

margin-top 再 次 合并 ， 这 次 合并 是 空 块 级 元 素 合并 ， 于 是 最 终 间 距 


还 是 1em。 


根据 我 多 年 开发 的 经 验 ， 由 于 衬 块 级 元 素 的 margin 合 并 发 后 不 愉 
快 事情 的 情况 非常 之 少 。 一 来 ， 我 们 很 少 会 在 页 面 上 放置 没什么 用 的 
空 <div>; 二 来 ， 即 使 使 用 空 <div> 也 是 画 画 分 隔 线 之 类 的 ， 一 般 都 
是 使 用 border 属性 ， 正 好 可 以 阻 断 margin 合 并 ; 三 来 ，CSS 开 发 人 
员 普 遍 没 有 margin 上 下 同时 开工 的 习惯 ， 比 方 说 一 个 列表 ， 间 距 都 是 
一 样 的 ， 开 发 人 员 一 般 都 是 单独 设 定 margin-top 或 margin-bottom 
值 ， 因 为 这 会 让 他 们 内 心 觉得 更 安全 。 于 是 ， 最 终 ， 空 块 级 元 素 的 
margin 合 并 就 变 成 了 一 个 对 CSS 世 界 有 着 具有 巨大 意义 但 大 多 数 人 都 
不 知道 的 特性 


如 果 有 人 不 希望 空 <div> 元 素 有 margin 合 并 ， 可 以 进行 如 下 操 
作 : 


。 设置 素 直 方向 的 border: 

。 设置 垂直 方向 的 padding; 

。 里 面 添加 内 联 元 素 (直接 Space 键 空格 是 没 用 的 ) : 
。 设 置 height 或 者 min-height。 


3. margin 合 并 的 计算 规则 


我 把 margin 合 并 的 计算 规则 总 结 为 “ 正 正 取 大 值 ”“ 正 负 值 相 加 *“ 负 
人 负 最 人 负 值 ”3 句 话 。 下 面 来 分 别 举例 说 明 。 


(1) 正 正 取 大 值 。 如 果 是 相 邻 兄弟 合并 : 


.a { margin-bottom: 50pXx; } 
‘.b { margin-top: 20px; } 


<div class="a"></a> 
<div class="b"></a> 


此 时 ,a 和 .b 两 个 <div> 之 间 的 间距 是 50px， 取 大 的 那个 值 。 
如 琳 是 父子 合并 : 


.father { margin-top: 20px; } 
.SON { margin-top: SOpx; } 
<div class="father"> 

<div class="son"></div> 
</div> 


此 时 .father 元 素 等 同 于 设置 了 margin-top:50px， 取 大 的 那个 
值 。 


如 采 是 目 身 合并 : 


a Lt{ 
margin-top: 20px; 


margin-bottom: 50px; 


<div class="a"></div> 
则 此 时 ,a 元 素 的 外 部 尺寸 是 50px， 取 大 的 那个 值 。 


(2) 正 负 值 相 加 。 如 果 是 相 邻 兄弟 合并 : 


margin-bottom: S50Opx; } 
margin-top: -20px; } 


class="a"></a> 
class="b"></a> 


此 时 .a 和 .b 两 个 <div> 之 间 的 间距 是 30px， 是 -20px+50px 的 计算 


如 琳 是 父子 合并 : 


.father { margin-top: -20px; } 
,SOn { margin-top: SOpx; } 
<div class="father"> 

<div class="son"></div> 
</div> 


此 时 .father 元 素 等 同 于 设置 了 了 -margin-top:30px， 
是 -20px+50px 的 计算 值 。 


如 琳 是 目 喘 合并 : 


a Lt{ 
margin-top: -20px; 
margin-bottom: 5QOpx; 


<div class="a"></div> 


则 此 时 ,a 元 素 的 外 部 尺寸 是 30px， 是 -20px+50px 的 计算 值 。 


(3) 负 负 最 负 值 。 如 果 是 相 邻 兄弟 合并 : 


margin-bottom: -50px; } 
margin-top: -20px; } 


class="a"></a> 
class="b"></a> 


此 时 ,a 和 .b 两 个 <div> 之 则 的 间距 是 -50px， 取 绝对 负 值 最 大 的 值 。 


如 有 条 生 父子 合并 : 


.father { margin-top: -20px; } 
.SON { margin-top: -50px; } 


<div class="father"> 
<div class="son"></div> 
</div> 


此 时 , father 元 素 等 同 于 设置 了 margin-top:-50px， 取 绝对 负 值 最 
大 的 值 。 


如 琳 是 目 喘 合并 : 


,区 


margin-top: -20px; 


margin-bottom: -50px; 


<div class="a"></div> 


则 此 时 , a 元 素 的 外 部 尺寸 是 -50px， 取 绝对 负 值 最 大 的 值 。 
4. margin 合 并 的 意义 

我 之 前 曾 见 到 类 似 这 样 的 说 法 : “margin-top 合 并 bug。” 这 种 说 
法 是 大 有 问题 的 ,，“margin-top 合 并 ”这 种 特性 是 故意 这 么 设计 的 ， 
在 实际 内 容 呈 现 的 时 候 是 有 着 重要 意义 的 ， 根 本 就 不 是 bug ! 不 要 直到 
出 平 自己 意料 或 者 自己 无 法 理解 的 现象 就 称 其 为 bug 。 


CSS 世 界 的 CSS 属 性 是 为 了 更 好 地 进行 图 文 信息 展示 而 设计 的 ， 博 
客 文章 或 者 新 闻 信 息 是 图 文 信息 的 典型 代表 ， 基 本 上 离 不 开 下 面 这 些 
HTML: 


<h2> 文 章 标题 </h2> 
<p> 文 章 段落 1. . .</p> 


<p> 文 章 段落 2. , ,</p> 
<ul> 
<1i> 列 表 1</1i> 
<1i> 列 表 2</1i> 
<1i> 列 表 3</1i> 
</U]> 


而 这 里 的 <h2>、<p>、<U1L> 默 认 全 部 都 是 有 垂直 方 回 的 margin 值 

的 ， 而 且 单 位 全 部 都 是 em。 首 先 解释 一 下 为 何 需要 margin 值 。 其 实 原 
因 很 简单 ，CSS 世 界 的 设计 本 意 就 是 图 文 信息 展示 ， 有 了 默认 的 
margin 值 ， 我 们 的 文章 、 新 闻 就 不 会 挤 在 一 起 ， 垩 直方 向 就 会 层次 分 
明 、 段 落 有 致 ， 阅 读 体验 就 会 好 ! 为 何 使 用 em 作为 单位 也 很 好 理解 ， 
大 家 应 该 知道 浏览 器 默认 的 字号 大 小 是 可 以 自 定义 的 吧 ， 例 如 ， 默 认 
的 是 16 像 素 ， 假 如 我 们 设置 成 更 大 号 的 字号 ， 同 时 HTML 标 签 的 
margin 是 像素 大 小 ， 则 会 发 生 文字 变 大 但 是 间距 不 变 的 情况 ， 原 本 段 
沙 有 致 的 阅读 体验 必然 又 会 变 得 令 人 室 息 。em 作 为 相对 单位 ， 则 可 以 
让 我 们 的 文章 或 新 闻 无 论 多 大 的 字体 都 排版 良好 。 可 以 看 到 ，HIML 标 
签 默认 内 置 的 CSS 属 性 值 完全 就 是 为 了 更 好 地 进行 图 文 信息 展示 而 设计 
的 。 


我 们 平时 进行 网 站 开发 的 时 候 都 会 重 置 各 种 默认 的 margin 尺 寸 ， 
这 是 件 需 要 好 好 审视 的 事情 ， 对 于 绝 大 多 数 网 站 ， 确 实 需 要 做 这 样 的 
处 理 ， 因 为 这 些 网 站 鲜 有 传统 的 图 文 信息 展示 区 域 。 但 是 ， 如 果 你 的 
站 点 是 博客 、 新 闻 门 户 或 公众 号 文章 ， 我 们 应 该 做 的 是 统一 标签 的 
margin 大 小 ， 而 不 是 一 股 脑 地 重 置 成 96 。 


下 面 说 说 margin 合 并 的 意义 。 对 于 兄弟 元 素 的 margin 合 并 其 作 
用 和 em 类 似 ， 都 是 让 图 文 信息 的 排版 更 加 舒服 自然 。 假 如 说 没有 


margin 合 并 这 种 说 法 ， 那 么 连续 段落 或 列表 之 类 自 尾 项 间距 会 和 其 他 
兄弟 标签 成 1:2 关 系 ; 文章 标题 距离 顶部 会 很 近 ， 而 和 下 面 的 文章 详情 
内 容 距 离 义 会 很 开 ， 束 会 造成 内 容 上 下 间距 不 一 致 的 情况 。 这 些 都 是 
粮 料 的 排版 体验 。 而 合并 机 制 可 以 保证 元 素 上 下 间距 一 怪 ， 无 论 是 
<h2> 标 题 这 种 margin 偶 大 的 元 素 ， 还 是 中 规 中 窍 的 <p> 元 素 ， 
为 “ 正 正 取 大 值 ”。 


父子 margin 合 并 的 意义 在 于 : 在 页 面 中 任何 地 方 租 套 或 直接 放 入 
任何 襟 <div>， 虱 不 会 影响 原来 的 块 状 布局 。<div> 征 网 页 布局 中 非 
常常 用 的 一 个 元 素 ， 其 语义 是 没有 语义 ， 也 就 古 不 代表 任何 特定 类 型 
的 内 容 ， 是 一 个 通用 型 的 具有 流体 符 性 的 容器 ， 可 以 用 来 分 组 或 分 
隅 。 由 于 其 作用 吏 是 分 组 的 ， 因 此 ， 从 行为 表现 上 来 看 ， 一 个 纯粹 的 
<div> 元 素 是 不 能 够 也 不 可 以 影响 原先 的 布局 的 。 现 在 有 如 下 一 段 
HTML: 


<div style="margin-top:20px;"></div> 


请 问 : 现在 要 在 上 面 这 段 HTML 的 外 面 再 骸 套 一 层 <div> 元 素 ， 假 如 说 
现在 没有 父子 margin 合 并 ， 那 这 层 新 黄 套 的 <div> 它 不 阻 断 了 原本 的 
兄弟 margin 合 并 ? 很 有 可 能 间距 就 会 变 大 ， 受 受 地 影响 了 原来 的 布 
局 ， 这 显然 就 违背 了 人 <div> 的 设计 作用 了 。 所 以 才 有 了 父子 margin 合 
并 ， 外 面 再 舱 套 一 层 <div> 元 素 就 跟 没 芯 套 一 样 ， 表 现 为 margin- 
top :20px 束 好 像 是 设置 在 最 外 面 的 <div> 元 素 上 一 样 。 


目 身 margin 合 并 的 意义 在 于 可 以 避免 不 小 心 遗 落 或 者 生成 的 空 标 
签 影响 排版 和 布局 。 例 如 : 


<p> 第 一 行 </p> 


<p> 第 二 行 </p> 


其 和 下 面 这 段 HTML 最 终 视觉 效 灯 是 一 模 一 样 的 : 


<p> 第 一 行 </p> 
<p> 第 二 行 </p> 


右 是 没有 目 身 mnargin 合 并 特性 的 话 ， 人 是 上 面 的 HTML 第 一 行 和 
第 二 行 之 间 要 隅 了 很 多 行 吧 。 


知道 了 margin 合 并 的 意义 以 及 作用 ， 而 且 合 并 规则 的 兼容 性 良 
好 ， 所 以 ， 我 自己 平时 网 页 制作 的 时 候 ， 遇 到 列表 或 者 模块 ， 全 部 都 
是 保留 上 下 margin 设 置 。 例 如 : 


.list { 
margin-top: 15px; 


margin-bottom: 15px; 


而 不 是 战 战 闫 鸯 地 使 用 : 


.list { 
margin-top: 15px; 
} 


因为 margin 合 并 特性 ， 所 以 我 们 无 须 担心 列表 之 间 的 间距 会 很 
大 。 不 会 的 ， 束 是 15px! 相反 ， 这 种 设置 让 我 们 的 页 面 结构 容错 性 更 
强 了 ， 比 方 说 最 后 一 个 元 系 移 除 或 位 置 调换 ， 均 不 会 破坏 原来 的 布 
局 ， 也 就 是 我 们 的 CSS 无 须 做 任何 调整 。 


4.3.4 ”深入 理解 CSS 中 的 margin:auto 


下 面 讲 讲 margin:auto 的 作用 机 制 。 首 先 ， 我 们 需要 知道 下 面 这 


(1) 有 时 候 元 素 就 算 没有 设置 width 或 height， 也 会 自动 填 
充 S 例如 : 


此 <div> 宽 度 束 会 自动 填 满 容器 。 


(2) 有 时 候 元 素 就 算 没有 设置 width 或 height， 也 会 自动 填充 
对 应 的 方位 。 例 如 : 
div { 


position: absolute; 
left: 0; right: 090; 


} 


此 时 <div> 宽 度 就 会 自动 填 满 包含 块 容器 。 


此 时 ， 如 果 设 置 width 或 height， 自 动 填充 特性 就 会 被 覆盖 。 例 
如 : 


此 时 ，<div> 宽 度 被 限制 成 了 200px， 无 法 目 动 填充 外 部 容器 的 可 用 
宽度 了 。 


假设 外 部 的 容器 宽度 是 300px， 则 有 100px 的 宽度 原本 应 该 自动 
填 满 的 ， 现 在 因为 width 设置 而 条 置 ， 而 margin:auto 就 是 为 了 填充 
这 个 闲置 的 尺寸 而 设计 的 ! 


margin:auto 的 填充 规则 如 下 。 
(1) 如 果 一 侧 定 值 ， 一 侧 auto， 则 auto 为 剩余 空间 大 小 。 


(2) 如 果 两 侧 均 是 auto， 则 平分 剩余 空间 。 


上 面 这 两 条 规则 中 第 二 条 可 能 大 家 都 知道 ， 但 是 第 一 条 介 和 是 知道 
的 人 束 不 多 了 。 我 们 来 看 一 个 例子 : 


.father { 
width: 300px; 


,SOn { 


width: 200px; 
margin-right: 80px; 
margin-left: auto; 


请 问 : 此 时 , son 的 左右 边 距 计算 值 是 多 少 ? 


如 果 是 对 margin:auto 没 有 一 定 深入 了 解 的 人 ， 可 能 会 认为 左边 
距 9、 右 边 距 100px， 实 际 上 不 是 的 ， 应 该 是 左边 距 20px、 右 边 距 
80px。margin 的 'auto' 可 不 是 摆设 ， 是 具有 强烈 的 计算 意味 的 关键 
字 ， 用 来 计算 元 素 对 应 方向 应 该 获得 的 剩余 间距 大 小 。 璧 如 这 里 ， 总 
剩余 间距 大 小 是 109 px， 其 中 margin-right 使 用 了 89 px， 那 自然 
margin-left 的 'auto' 计 算 值 就 是 剩余 的 20px 了 。 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/4/3-4.php 或 者 扫 右 侧 的 
二 维 码 。 歼 果 如 图 4-56 所 示 。 


由 于 CSS 世 界 中 margin 的 初始 值 大 小 是 0， 因 此 ， 上 面 的 例子 如 
果 margin-right 缺 失 ， 实 现 的 效果 正好 是 块 级 元 率 的 右 对 齐 效 果 。 
也 就 是 : 
,SOn { 


width: 200px; 
margin-left: auto; 


效果 如 图 4-57 所 示 。 


图 4-56 ”margin 单 侧 值 为 auto 表 现 示意 


图 4-57 margin-1left:auto 实 现 的 右 对 齐 效果 


所 以 ， 如 果 想 让 某 个 块 状元 系 右 对 齐 ， 脑 子 里 不 要 残 一 个 
float :right， 很 多 时 候 ，margin-left:auto 才 是 最 佳 的 实践 ， 
浮动 毕竟 是 个 “小 魔鬼 ”。 我 甚至 可 以 这 么 说 : margin 属 性 的 auto 计 
算 就 是 为 块 级 元 素 左 中 右 对 齐 而 设计 的 ， 和 内 联 元 素 使 用 text- 
align 控 制 左 中 右 对 齐 正好 遥相呼应 ! 


居中 对 齐 左右 同时 auto 计 算 即 可 ，CSS 如 下 : 


,SOn { 
width: 200px; 


margin-right: auto; 
margin-left: auto; 


此 时 ， 左 右边 距 都 是 506px， 因 为 对 立方 向 都 是 auto 的 时 候 剩余 间距 等 
分 ， 所 以 左右 间距 一 样 ， 形 成 大 中 效 末 。 


虽然 知道 了 margin:auto 的 计算 规则 ， 但 有 人 还 是 会 有 一 些 疑 
问 ， 比 方 说 : 为 什么 明明 容器 定 高 、 元 素 定 高 ，margin:auto 却 无 法 
重 直 居中 ? 


.father { 
height: 200px; 


,SOn { 


height: 100px; 
margin: auto; 


} 


原因 在 于 触发 nargin:auto 计 算 有 一 个 前 提 条 件 ， 束 是 width 或 
height 为 auto 时 ， 元 素 是 具有 对 应 方向 的 目 动 填充 特性 的 。 比 方 说 
这 里 ， 假 如 说 把 ,son 元 素 的 height :100px 去 掉 ，, son 的 高 度 会 自 
动 和 父 元 素 等 高 变 成 200px 吗 ? 显然 不 会 ! 因此 无 法 触发 
margin:auto 计 算 ， 故 而 无 法 牌 直 居中 。 


可 能 有 人 又 会 问 了 : 我 们 垂直 方 网 margin 无 法 实现 居中 了 吗 ? 当 
然 是 可 以 的 ， 而 且 场 景 还 不 止 一 种 。 


第 一 种 方法 是 使 用 writing-mode 改 变 文档 流 的 方向 : 


father { 
height: 200px; 
writing-mode: vertical-lr; 


,SOn { 
height: 100px; 
margin: auto; 


此 时 ,son 就 是 垂直 居中 对 齐 的 ， 但 是 这 也 带 来 另外 的 问题 ， 就 是 水 平 
方向 无 法 auto 居 中 了 。 


所 以 ， 有 人 会 关心 有 没有 让 水 平 垂直 同时 居中 的 方法 。 有 ， 就 是 
这 里 要 提 的 第 二 种 方法 ， 绝 对 定位 元 素 的 margin:auto 居 中 。 下 面 我 
们 边 解释 为 何 居中 边 展示 效果 。 首 先 ， 下 面 的 CSS 代 码 : 


,father { 
width: 300px; height:150px; 
position: relative; 


,SOn { 
position: absolute 
top: 0; right: 0; bottom: 0; left: ©; 


此 时 . son 这 个 元 素 的 尺寸 表现 为 “格式 化 宽度 和 格式 化 高 度 ”， 和 
<div> 的 “正常 流 宽度 一样， 同属 于 外 部 斥 寸 ， 也 就 是 太 寸 自动 填充 
父 级 元 聚 的 可 用 扩 寸 ， 此 时 我 们 给 ,son 设置 矿 寸 。 例如: 


,SOn { 
position: absolute; 
top: 0; right: 0; bottom: 0; left: 0; 
width: 200px; height: 100px; 


此 时 宽 高 被 限制 ， 原 本 应 该 填充 的 空间 就 被 空余 了 出 来 ， 这 多 余 
的 空间 就 是 margin:auto 计 算 的 空间 ， 因 此 ， 如 果 这 时 候 我 们 再 设置 
一 个 margin:auto: 

,SOn { 


position: absolute 
top: 0; right: 0; bottom: 0; left: 0O; 


width: 200px; height: 100px; 
margin: auto; 


那么 我 们 这 个 .son 元 素 束 水 平方 同和 垂直 方向 同时 大 中 了 。 因 为 auto 
正好 把 上 下 左右 剩余 空间 全 部 等 分 了 ， 目 然 惑 居中 ! 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/3-5.php 或 者 扫 下 面 的 
二 维 码 。 效 果 如 图 4-58 所 示 。 


图 4-58 ”绝对 定位 元 素 下 的 margin:auto 居 中 对 齐 效果 


由 于 绝对 定位 元 素 的 格式 化 高 度 即 使 父 元 素 height :auto 也 是 文 
持 的 ， 因 此 ， 其 应 用 场景 可 以 相当 广泛 ， 可 能 唯一 的 不 足 就 是 此 居中 
计算 IE8 及 以 上 版 本 浏览 器 才 支 持 。 至 少 对 我 来 讲 ， 如 果 项 目 无 须 兼容 
IE7 浏 览 器 ， 绝 对 定位 下 的 margin:auto 居 中 是 我 用 得 最 频繁 的 块 级 
元 素 垂直 居中 对 齐 方式 ， 比 top :50% 然 后 margin 负 一 半 元 素 高 度 的 方 
法 要 好 使 得 多 。 


最 后 ， 还 有 一 个 大 家 可 能 关心 的 问题 ， 假 如 说 这 里 面 的 元 素 尺 十 
比 外 面 的 大 ， 那 这 个 auto 该 怎么 计算 呢 ? 


很 简单 ， 如 果 里 面 元 素 尺 寸 大 ， 说 明 剩 余 可 用 空间 都 没有 了 ， 会 
被 当 作 0 来 处 理 ， 也 就 是 auto 会 被 计算 成 0O， 其 实 束 等 于 没有 设置 
margin 属 性 值 ， 因 为 margin 的 初始 值 就 是 0。 


另外， 对 于 替换 元 素 ， 如 果 我 们 设置 display:block， 则 
margin:auto 的 计算 规则 同样 适合 。 


4.3.5 margin 无 效 情形 解析 


因为 margin 属 性 的 诸多 特异 性 ， 所 以 ， 我 们 在 实际 开发 的 时 候 ， 
经 单 会 遇 到 设置 的 nargin 无 效 的 情形 ， 这 里 我 罗列 一 下 ， 布 望 大 家 过 
到 类 似 的 问题 知道 原因 以 及 如 何 对 症 下 药 。 


(1) display 计 算 值 ]nline 的 非 符 换 元 素 的 垂直 margin 是 无 
效 的 ， 虽然 规范 提 到 有 泻 染 ， 但 浏览 器 表现 却 未 寻 得 一 点 踪迹 ， 这 和 
padding 是 有 明显 区 别 的 。 对 于 内 联 替 换 元 素 ， 垂 直 margin 有 效 ， 并 
且 没 有 margin 合 并 的 问题 ， 所 以 图 乒 永 远 不 会 发 生 margin 合 并 。 


(2) 表格 中 的 <tr> 和 <td> 元 素 或 者 设置 display 计 算 值 是 
table-cell 或 table-row 的 元 素 的 margin 都 是 无 效 的 。 但 是 ， 如 
果 计 算 值 是 table-caption、table 或 者 ijnline-table 则 没有 此 
问题 ， 可 以 通过 margin 控 制 外 间距 ， 其 至 :; :first-letter 伪 元 素 
也 可 以 解析 margin。 


(3) margin 合 并 的 时 候 ， 更 改 margin 值 可 能 是 没有 效果 的 。 以 
父子 margin 重 车 为 例 ， 假 设 父 元 素 设置 有 margin-top:50px， 则 此 
时 子 元 素 设 置 mnargin-top:30px 束 没有 任何 效果 表现 ， 除 非 大 小 比 
50px 大 ， 或 者 是 负 值 。 


(4) 绝对 定位 元 素 非 定位 方位 的 margin 值 “无 效 "”。 什 么 意思 
呢 ? 很 多 时 候 ， 我 们 对 元 素 进行 绝对 定位 的 时 候 ， 只 会 设置 1 一 2 个 相 


邻 方位 。 例 如 : 


img { top: 10%; left: 30%;} 


此 时 right 和 bottom 值 属于 auto 状 态 ， 也 就 是 右 侧 和 底部 没有 进行 
定位 ， 此 时 ， 这 两 个 方向 设置 margin 值 我 们 在 页 面 上 是 看 不 到 定位 变 
化 的 。 例 如 : 


img { 
top: 10%; left: 30%; 


margin-right: 30px; 


此 时 margin-right:30px 几 乎 吏 是 摆设 。 是 margin 没 起 作用 吗 ? 实 
际 上 不 是 的 ， 绝 对 定位 元 素 任 意 方 位 的 margin 值 无 论 在 什么 场景 下 都 
一 直 有 效 。 璧 如 这 个 例子 ， 假 设 <img> 宽 度 70%， 同 时 父 元 素 是 具有 定 
位 属性 ， 且 overf1Low 设 置 为 auto 的 元 素 ， 则 此 时 就 会 出 现 水 平 滚动 

条 ， 因 为 margin-right:30px 增 加 了 图 片 的 外 部 尺寸 。 


那 为 什么 一 般 情 况 下 没有 效果 呢 ? 主要 是 因为 绝对 定位 元 素 的 泻 
染 是 独立 的 ， 普 通 元 素 和 兄弟 元 素 是 心 连 心 ， 你 动 我 也 动 ， 但 是 绝对 
定位 元 素 由 于 独立 泻 染 无 法 和 兄弟 元 素 插 科 打 许 ， 因 此 ，margin 无 法 
影响 兄弟 元 素 定 位 ， 所 以 看 上 去 就 “无 效 ”。 


(5) 定 高 容器 的 子 元 素 的 margin-bottom 或 者 宽度 定 死 的 子 元 
素 的 margin-right 的 定位 “失效 ”。 


我 们 先 看 例子 : 


<div class="box"> 
<div class="child"></div> 
</div> 
.box { 
height: 100px; 


} 

.child { 
height: 80px; 
margin-bottom: 100px; 


这 里 ，margin-bottom:100px 是 不 会 在 容器 底部 形成 100px 的 外 间 
距 的 ， 看 上 去 就 像 是 “失效 ”一 样 ， 同 样 的 HTML，CSS 代 码 如 下 : 


.box { 
width: 100px; 


} 
.child { 


width: 80px; 
margin-right: 100px; 


此 时 ，margin-right:100px 对 元 素 的 定位 也 没有 任何 影响 ， 给 
人 人 “无效” 的 感觉 ， 实 际 上 ， 这 个 现象 的 本 质 和 上 面 绝 对 定位 元 素 非 对 
立方 位 margin 值 “< 无效” 类 似 。 原 因 在 于 ， 若 想 使 用 margin 属 性 改变 
自身 的 位 置 ， 必 须 是 和 当前 元 素 定位 方向 一 样 的 margin 属 性 才 可 以 ， 
否则 ，margin 只 能 影响 后 面 的 元 素 或 者 父 元 素 。 


例如 ， 一 个 普通 元 素 ， 在 默认 流下 ， 其 定位 方向 是 左 侧 以 及 上 
方 ， 此 时 只 有 margin-left 和 margin-top 可 以 影响 元 素 的 定位 。 但 
是 ， 如 有 果 通 过 一 些 属性 改变 了 定位 方向 ， 如 float :right 或 者 绝对 定 
位 元 素 的 right 右 侧 定 位 ， 则 反 过 来 margin-right 可 以 影响 元 素 的 
定位 ，margin-left 只 能 影响 兄弟 元 素 。 


在 本 例 中 ， 父 容 秦 只 有 一 个 子 元 素 ， 因 此 没有 影响 兄弟 元 聚 的 说 
法 ， 加 上 有 要么 定 视 要 么 定 高 ， 右 侧 和 雄 部 无 nargin 重 于 ， 因 此 外 部 的 
元 素 也 不 会 有 任何 布局 上 的 影响 ， 因 此 束 给 人 “无 效 "的 错觉 ， 实 际 上 
征 margin 目 生 的 特性 导致 ， 有 泻 染 只 是 你 看 不 到 变化 而 已 。 


(6) 鞭 长 莫 及 导致 的 margin 无 效 。 我 们 直接 看 下 面 这 个 例子 : 


<div class="box"> 
<img src="mm1.jpg"> 
<p> 内 容 </p> 

</div> 


.box > img { 
float: left; 


width: 256px; 


} 
‘box > pi 
overflow: hidden; 
margin-left: 200px; 
} 


其 中 的 margin-left:200px 是 无 效 的 ， 准 确 地 讲 ， 此 时 的 <p> 的 
margin-left 从 负 无 穷 到 256px 都 是 没有 任何 效果 的 。 要 解释 这 里 为 
何 会 无 效 ， 需 要 对 float 和 overflow 深 入 理解 ， 而 这 两 个 属性 都 是 后 
面 的 内 容 ， 因 此 ， 深 入 原因 分 析 我 们 将 在 6.4 节 介绍 。 


(7) 内 联 特性 导致 的 margin 无 效 。 我 们 直接 看 下 面 这 个 例子 : 


<div class="box"> 
<img src="mm1.jpg"> 
</div> 
.box > img { 
height: 96px; 


margin-top: -200px; 


这 里 的 例子 也 很 有 代表 性 。 一 个 容 需 里 面 有 一 个 图 片 ， 然 后 这 张 
图 片 设置 margin-top 负 值 ， 计 图 片上 偏 移 。 但 是 ， 随 着 我 们 的 负 值 
越 来 越 负 ， 结 果 达 到 某 一 个 具体 负 值 的 时 候 ， 图 厂 不 再 往 上 偏 移 了 。 
比方 说 ， 本 例 margin-top 设 置 的 是 -200px， 如 果 此 时 把 margin- 
top 设 置 成 -300px， 图 片 会 再 往 上 偏 移 100px 吗 ? 不 会 ! 它 会 微 丝 不 
动 , margin-top 变 得 无 效 了 。 要 解释 这 里 为 何 会 无 效 ， 需 要 对 
vertical-align 和 内 联 盒 模 型 有 深入 的 理解 ， 而 这 vertical- 
align 是 后 面 的 内 容 ， 因 此 ， 深 入 原因 分 析 我 们 将 在 5.3 节 介绍 。 这 里 
大 家 先 记 住 有 这 么 一 个 margin 失 效 的 场景 即 可 。 


4.4 ”功勋 卓越 的 border 属 性 


顾名思义 ，border 就 是 “边框 *"， 从 名 字 束 可 以 看 出 来 CSS 设 计 者 
设计 此 属性 的 目的 就 是 给 元 素 弄 个 边框 什么 的 。 但 是 ，CSS 世 界 中 很 多 
大 受 欢 迎 的 属性 之 所 以 受 欢迎 ， 并 不 是 因为 其 本 职工 作 做 得 很 好 ， 而 
是 衍生 出 来 的 特性 可 以 用 来 解决 很 多 严 手 的 问题 。border 属 性 就 是 典 
型 代表 之 一 。 我 总 是 称赞 border“ 功 勋章 越 *"， 正 是 因为 border 属 性 
在 图 形 构 建 、 体 验 优化 以 及 网 页 布局 这 块 几 大 放 异 彩 ， 同 时 保证 其 良 
好 的 兼容 性 和 稳定 的 特性 表现 才 得 此 荣 兆 的 ， 如 果 就 老 老 实 实 画 个 框 
框 ， 就 不 可 能 称赞 它 “ 功 勋 卓越 ?。 


下 面 我 们 一 起 看 看 border 都 有 哪些 精彩 的 特性 表现 。 
4.4.1 为 什么 border -width 不 支持 百分比 值 


虽然 同属 盒 模型 基本 成 员 ， 但 是 border -width 却 不 支持 百 分 


是 无 效 的 ， 直 接 声明 无 效 。 这 一 点 和 margin 和 padding 都 不 一 样 ， 下 
面 问题 来 了 : 为 什么 border -width 不 支持 百分比 呢 ? 


有 人 说 不 好 解析 、 不 好 表现 。 在 我 看 来 ， 是 没有 这 个 问题 的 ， 直 
接 和 margin 和 padding 一 样 ， 全 部 相对 于 宽度 计算 就 好 了 ， 没 有 任何 
泻 染 上 的 难度 。 之 所 以 不 支持 ， 在 我 看 来 是 语义 和 使 用 场景 决定 的 。 


首先 看 语义 。 顾 名 思 义 ，border-width 是 “边框 宽度 "， 我 们 先 
来 看 看 现实 世界 的 物体 的 边框 ， 假 设 我 们 现在 有 两 台数 码 设备 ， 分 别 
是 iMac 和 iPhone， 很 显然 ， 这 两 台 设 备 的 尺寸 差异 很 大 ， 但 是 ， 大 家 仔 
细 对 比 就 会 发 现 ， 这 两 者 的 边框 大 小 差别 跟 屏 幕 设备 相 比 较 而 言 就 可 
以 忽略 不 计 了 。 看 到 没 ， 所 谓 “ 边 框 *， 是 不 会 因为 设备 大 就 按 比 例 变 
大 的 。 因 此 ， 如 采 文 持 百 分 比值 ， 是 不 是 就 意味 着 设备 大 了 边框 也 跟 
着 变 大 ? 这 显然 不 合 * 边 框 ? 的 语义 嘛 ! 然后 再 看 使 用 场景 ， 虽 然 说 如 
果 border-width 文 持 百 分 比值 布局 什么 的 能 做 的 事情 就 更 多 了 ， 但 
是 ， 我 们 要 想到 CSS 世 界 创造 的 背景 主要 是 为 图 文 展示 服务 的 ， 有 一 张 
图 片 ， 大 片区 域 都 是 白色 的 ， 在 白 底 背景 上 和 文字 混在 一 起 ， 就 会 有 
一 片 奇 怪 的 空白 区 域 ,， 会 让 人 产生 没 对 齐 的 假象 ， 此 时 ， 我 们 给 这 张 
图 片 套 个 1px 灰 色 边 框 ， 区 域 就 明显 了 ， 对 吧 ! 设计 的 初衷 就 是 为 了 这 
么 点 儿 事 ， 没 有 需要 使 用 百分比 值 的 场景 。 于 是 ， 综 合 这 两 点 ， 造 成 
了 border-width 不 支持 百分比 值 。 


实 还 有 很 多 CSS 属 性 ， 如 outline、box-shadow、text- 
ooo 都 是 不 文 持 百 分 比值 的 ， 原 因 也 与 此 类 似 。 


Tt 如 border - 
width:1px 之 类 ， 但 是 ， 可 能 有 些 人 并 不 知道 border -width 还 文 持 
若干 关键 字 ， i (默认 值 ) 和 thick， 对 应 的 尺寸 
大 小 具体 如 下 。 


。 thin: 薄 薄 的 ， 等 同 于 1pX。 
。 medium 《默认 值 ) : 薄 厚 均匀 ， 等 同 于 3px。 
。thick: 厚 厚 上 的， 等同 于 4px。 


不 知道 大 家 有 没有 想 过 这 么 一 个 问题 : 为 什么 border 属 性 的 默认 
宽度 大 小 是 medium， 也 就 是 3px， 明 明 thin (1px) 宽度 更 常用 吧 ? 


为 什么 呢 ? 因为 ..…..border-style:doub1le 至 少 3px 才 有 效 
果 ! border-style,, ,double? 我 好 像 只 知道 solid、dashed 和 
dotted， 这 double 是 个 什么 ? 


下 面 我 们 一 起 看 看 border -style 的 一 些 有 趣 的 故事 。 
4.4.2 了解 各 种 border -style 类 型 


1. border-style:none 

注意 ，border-style 的 默认 值 是 none， 有 一 部 分 人 可 能 会 误 以 
为 是 solid。 这 也 是 单纯 设置 border -width 或 border -color 没 有 
边框 显示 的 原因 ， 如 下 示意 : 


div { border: 10px; } /* 无 边框 出 现 */ 
div { border: red; } /* 无 边框 出 现 */ 


如 果 是 border-style 类 型 值 则 边框 出 现 。 例 如 ， 下 面 CSS 会 出 
现 3 像 素 宽 的 边框 : 


div { border: solid; } /* 有 边框 出 现 */ 


平时 我 们 使 用 border-style:none 多 出 现在 重 置 边框 样式 的 时 
修 ， 例 如 ， 实 现 一 个 没有 下 边框 的 边框 效果 : 


div { 
border: 1px solid; 


border-bottom: none; 


} 


当然 ， 我 们 也 可 以 通过 直接 设置 边框 宽度 为 9 进行 重 置 : 


div { 
border: 1px solid; 
border-bottom: 0; 


} 


当然 ， a 能 控 ”"”， 可 以 两 个 一 起 写 ， 根据 前 过 的 测 


试 ， 这 样 写 浑 染 性 能 最 高 


div { 
border: 1px solid; 
border-bottom: 0 none; 


} 


2. border-style:solid 
这 个 大 家 耳熟能详， 妇 括 省 知 ， 实 线 边 框 ， 没 什么 好 说 的 。 


3. border-style:dashed 


虚线 边框 可 以 说 是 使 用 频率 第 二 高 的 边框 类 型 了 ， 至 于 使 用 没 什 
么 好 说 的 ， 倒 是 这 边框 本 吴 的 一 些 演 染 数 据 挺 有 意思 。 这 虚线 颜色 区 
的 宽 高 比 以 及 颜色 区 和 透明 区 的 宽度 比例 在 不 同 浏览 器 下 是 有 差异 
的 。 例 如 ， 在 Chrome 和 Firefox 浏 览 右 下 ， 颜 色 区 的 宽 高 比 是 3:1， 颜 色 
区 和 透明 区 的 宽度 比例 是 1:1， 如 图 4-59 所 示 ; 而 还 浏览 器 则 是 另外 的 
数据 ， 颜 色 区 的 宽 高 比 是 2:1， 颜 色 区 和 透明 区 的 宽度 比例 也 是 2:1， 如 
图 4-60 所 示 。 


宽 高 3:1 宽 高 3:1 


图 4-59 Chrome 浏览 器 下 虚线 边框 一 些 比例 数据 


2 


L__ | 
2:1 


图 4-60 ”下 浏览 器 下 虚线 边框 一 些 比例 数据 


本 身 束 是 方 方 正 正 的 ， 再 加 上 兼容 性 的 蕾 异 ， 基 本 上 束 只 能 当 作 
虚 框 来 用 了 。 


4. border-style:dotted 


虚 点 边框 在 表现 上 同样 有 兼容 性 差异 ， 虽 然 规 范 上 明确 表示 是 个 
圆 点 ， 但 是 Chrome 以 及 Firefox 浏 览 郁 下 庶 点 实际 上 坪 个 小 方 扎 ， 如 岁 
4-61 所 示 ; 而 下 浏览 万 下 则 是 小 圆 点 ， 如 岁 4-62 所 示 。 


border-style: dotted; 


图 4-61 ”Chrome 浏览 器 下 点 线 边 框 样式 


。border-style: dotted; 。 


图 4-62” 正 浏 蜗 器 下 点 线 边 框 样式 


同样 一 样 事物 ， 在 有 些 人 眼中 是 一 扫 而 过 ， 但 在 有 些 人 眼中 却 走 
如 获 至 至 。 不 知 大 家 对 上 面 的 虚 点 边框 表现 都 怎么 看 昵 ? 有 没有 什么 
地 方 让 你 尾 袋 心动 的 呢 ? 


反正 ， 我 是 眼前 一 亮 了 ， 亮 在 什么 地 方 呢 ? 就 是 下 浏览 右 下 的 虚 
点 是 个 圆 ! 对 ， 圆 ， 难 道 还 意识 不 到 吗 ? 众所周知 ，CSS 圆 角 属 性 
border-radius 从 IE9 浏 览 锅 才 开始 文 择 ， 正 8 这 些 浏览 右 要 想 实现 圆 
角 ， 要 么 用 图 片 要 么 使 用 复杂 生 涩 的 VML， 但 是 ，dotted 类 型 边框 天 
然 就 是 一 个 圆 ， 那 我 们 要 想 在 IE8 浏 哆 絮 下 实现 圆 角 效果 ， 是 不 是 就 轻 
松 多 了 呢 ? 


例如 ， 下 面 的 CSS: 


.dotted { 
width: 150px; height: 150px; 
border: 149px dotted #cd0000; 


} 


则 此 时 的 表现 如 图 4-63 所 示 。 此 时 的 样式 表现 就 是 4 个 规整 的 圆 点 ， 此 
时 ， 我 们 只 需要 配合 overflow:hidden， 让 其 中 3 个 点 隐藏 ， 则 圆 角 
效果 就 实现 了 ， 如 图 4-64 所 示 。 


149px dotted 


图 4-63” 正 浏览 器 4 个 虚 点 


图 4-64 ”隐藏 3 个 圆 点 即 可 实现 圆 角 效果 
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使 用 CSS 代 码 表示 就 是 : 


.box { 
width: 150px; height: 150px; 
/* 超出 区 域 隐藏 ， 只 显示 一 个 圆 */ 
overflow: hidden; 


} 

.dotted { 
width: 100%; height: 100%; 
border: 149px dotted #cd0000; 


} 


但 是 ， 上 面 的 方法 只 能 实现 正 圆 圆 角 ， 如 采 想 实现 任意 大 小 的 圆 
角 该 上 怎么 办 ? 


其 实 也 不 难 ， 我 们 不 定 有 4 个 圆 点 吗 ， 正 好 可 以 作为 圆 角 的 4 个 
角 ， 再 覆盖 2 层 矩 形 实 色 (如 图 4-65 黑 线 线 框 部 分 区 域 所 示 ) ， 就 实现 
了 小 圆 角 效果 了 。 


图 4-65 ”任意 大 小 圆 角 实现 示意 


5. border-style:double 
双 线 边框 ， 顾 名 思 义 ， 即 两 根 线 旦 为 实 线 。 虽 然 平常 我 们 使 用 


少 ， 但 是 其 兼容 性 非常 好 。 视 觉 表 现 为 线 框 一 一 透明 线 框 ， 根 据 
border-width 大 小 不 同 ， 其 表现 规则 如 表 4-2 所 示 。 


表 4-2 border-style:double 表 现 规则 


TT 


从 表 4-2 可 以 看 到 ， 当 边框 宽度 是 1px 和 2px 的 时 候 ， 其 表现 和 
border-style:solid 是 一 模 一 样 的 当 边 框 为 3px 的 时 候 ， 才 开始 
有 双 线 边框 的 表现 ， 包 括 retina 屏 幕 也 是 如 此 ， 因 为 边框 宽度 是 没有 半 
像素 的 概念 的 。 还 记 不 记得 上 一 节 留 下 的 问题 ，“ 为 什么 border - 
width 的 默认 值 是 media (3px) ? "答案 就 在 这 里 ， 虽 然 说 实际 开发 
的 时 候 1px 大 小 的 so1id 类 型 边框 是 最 常用 的 ， 但 是 却 无 法 让 double 
类 型 边框 有 合乎 语义 的 表现 ， 因 此 使 用 了 能 表现 doub1e 类 型 的 最 小 边 
框 宽 度 3px 作 为 边框 宽度 默认 值 。 


根据 表 4-2， 我 们 还 可 以 用 一 句 话 总 结 出 border-style:double 
的 表现 规则 : 双 线 宽度 永远 相等 ， 中 间 间 隅 +1。 


于 是 ， 我 们 就 可 以 借助 border -style:doub1le 实 现 一 些 等 宽 的 
图 形 效 果 。 例 如 ， 等 比例 “三 道 杠 ”图 标 效 果 如 图 4-66 所 示 。 


图 4-66 “三 道 杠 ”小 图 标示 意 


CSS 代 码 如 下 : 


.icon-menu { 
width: 120px; 
height: 20px; 
border-top: 60px double; 


border-bottom: 20px solid; 


6. 其 他 border -style 类 型 


inset (内 凹 ) 、outset (外 凸 ) 、groove ( 沟 槽 ) 、ridge 
(山脊 ) 风格 老 土 过 时 ， 且 兼容 性 惨不忍睹 ( 见 图 4-67) 。 因 此 ， 它 们 
没有 任何 实用 价值 。 但 是 ， 它 们 也 不 是 一 无 是 处 ， 这 几 个 边框 类 型 的 
出 现 无 形 中 规范 了 实 线 边框 的 转角 连接 规则 。 规 范 中 并 没有 任何 关于 
边框 连接 规则 的 描述 ， 按 照 一 般 的 套路 ， 浏 览 恬 会 表现 不 一 ， 类 似 虚 
线 之 类 边框 确实 如 此 ， 但 是 ， 对 于 so1id 类 型 边框 ， 各 个 浏览 器 却 像 
是 约定 好 了 ， 连 接 表现 一 致 ， 背 后 起 作用 的 恰恰 是 这 几 个 看 上 去 没有 
任何 作用 的 porder-sty1e 类 型 。 这 为 border 图 形 生成 技术 的 广泛 应 
用 打下 了 坚实 的 基础 。 


IE Chrome Firefox 


图 4-67 inset、outset、groove、ridge 各 浏览 器 表现 截图 


4.4.3 border-color 和 color 


border-color 有 一 个 很 重要 也 很 实用 的 特性 ， 丈 是 border - 
color 默 认 颜色 就 是 color 色 值 "*。 具体 来 讲 ， 就 是 当 没有 指定 
border -color 颜 色 值 的 上 时候， 会 使 用 当前 元 素 的 color 计 算 值 作为 
边框 色 。 例 如 ， 下 面 这 个 例子 : 


,box { 
border: 10px solid; 
color: red; 


此 时 ，. box 元 素 的 10px 边 框 闫 色 就 是 红色 。 


具有 类 似 特 性 的 CSS 属 性 还 有 out1Line、box-shadow 和 text - 


shadow 等 。 


那 这 种 特性 对 于 实际 开发 有 没有 什么 作用 呢 ? 我 们 直接 看 一 个 例 
子 ， 我 们 在 上 传 图 片 的 时 候 ， 往 往 后 面 会 跟着 一 个 禹 有 加 号 的 框框 按 
钮 ， 表 示 可 以 继续 传 图 ， 如 图 4-68 所 示 ， 然 后 hover 的 时 候 会 变 个 色 。 


图 4-68 ”和 带 加 号 的 上 传 按 钮 


这 种 方 方 正 正 、 简 简单 单 的 图 形 最 适合 使 用 三 三 两 两 的 CSS 代 码 绘 
制 了 7。 通常， 正常 思维 下 ， 我 们 都 是 使 用 width/height 外 加 一 个 
background-color 绘 制 加 号 的 ， 核 心 CSS 代 码 如 下 : 


.add { 
border: 2px dashed #ccc; 


} 
.add:before, .add:after { 
background: #ccc; 


/* hover 变 色 */ 
,add:hover { 
border-color: #06C; 


.add:hover:before, .add:hover:after { 
background: #06C; 


功能 没有 任何 问题 ， 唯 独 当 我 们 hover 变 色 的 时 候 ， 需 要 同时 重 
置 3 处 (元 素 本 身 以 及 两 个 伪 元 素 ) 颜色 。 实 际 上 ， 如 果 这 里 不 是 使 用 
background-color， 而 是 使 用 border 来 绘制 加 号 ， 则 代码 要 简单 
得 多 ， 如 下 : 


,add { 
color: #ccc; 
border: 2px dashed; 


} 
.add:before { 
border-top: 10px solid; 


} 
.add:after { 
border-left: 10px solid; 


/* hover 变 色 */ 
,add:hover { 
color: #06C; 


可 以 看 到 ， 使 用 border 实 现 ， 我 们 hover 变 色 的 上 时候， 只 需要 重 
置 1 处 ， 也 就 是 重 置 元 素 本 身 的 color 就 可 以 了 。 因 为 整个 图 形 都 是 使 
用 border 绘 制 的 ， 同 时 颜色 缺 省 ， 所 以 所 有 图 形 颜色 自动 跟着 一 起 变 
二 


图 4-69 ”加 号 按钮 鼠标 经 过 效果 


效果 演示 地 址 是 http:/demo.cssworld.cn/4/4-1.php 。hover 鸡 果 如 
图 4-69 所 示 。 


4.4.4 border 与 透明 边框 技巧 


虽然 color :transparent 在 IE9 以 上 版 本 的 浏览 器 才 支 持 ， 但 是 
border-color: transparent 在 IE7 浏 览 右 就 开始 支持 了 ， 于 是 ， 
我 们 解决 一 些 环 手 问题 的 思路 就 更 加 开阔 了 。 


1. 右 下 方 background 定 位 的 技巧 


在 CSS3 新 世界 还 没 到 来 的 时 候 ，background 定 位 有 一 个 比较 大 
的 局 限 性 ， 就 是 只 能 相对 左上 角 数 值 定位 ， 不 能 相对 右 下 角 。 这 种 特 
性 有 时 候 会 给 我 们 的 工作 带 来 一 点 儿 麻 烦 。 举 个 例子 ， 假 设 现在 有 一 
个 宽度 不 国定 的 元 素 ， 我 们 需要 在 距离 右边 缘 50 像 素 的 位 置 设置 一 个 
背景 图 片 ， 此 时 background 属 性 就 遭遇 篮 认 了: 由 于 宽度 不 固定 ， 
所 以 无 法 通过 设 定 具体 数值 来 实现 我 们 想 要 的 效果 ， 因 为 
background 是 相对 左上 角 定 位 的 ， 我 们 的 需求 是 右 侧 定 位 。 


要 实现 上 面 的 需求 ， 方 法 挺 多 。 其 中 一 种 方法 驶 是 使 用 透明 边 
框 ， 如 下 CSS 代 码 : 


.box { 
border-right: 50px solid transparent; 


background-position: 100% 50%; 


此 时 ， 对 50px 的 间距 我 们 使 用 transparent 边 框 表 示 ， 这 样 就 可 以 
使 用 百分比 background-position 定 位 到 我 们 想 要 的 位 置 了 。 因 
为 ， 默认 background 背 景 图 片 是 相对 于 padding box 定 位 的 ， 也 就 古 
说 ，background-position:100% 的 位 置 计 算 默 认 是 不 会 把 
border-width 计 算 在 内 的 。 


2. 优雅 地 增加 点 击 区 域 大 小 


这 是 提高 用 户 体验 的 一 个 小 技巧 ， 尤 其 在 移动 端 ， 我 们 的 操作 工 
具 一 般 束 是 我 们 的 手指 ， 但 有 古 ， 我 们 的 手指 相 细 可 以 媳 美 胡 芝 下 ,而 
屏幕 尺寸 就 那么 点 儿 ， 如 果 我 们 正在 走路 ， 则 一 些 精 致 的 图 标 和 按钮 
很 容易 吏 点 不 中 甚至 误 点 。 举 个 例子 ， 在 移动 端 搜索 输入 框 输入 内 容 
后 ， 右 侧 会 有 一 个 清除 按钮 ， 类 似 于 图 4-70 所 示 。 


我 是 初始 值 


图 4-70 ”搜索 框 清 除 按 钮 


无 论 我 们 十 使 用 CSS 图 标 合并 工具 还 十 手写 模拟 ， 基 本 上 痢 是 按照 
图 标的 原始 尺寸 写 的 ， 类 似 下 面 : 


.icon-clear { 
width: 16px; 
height: 16px; 


效果 虽然 没 问题 ， 但 古 体 验 不 一 定好 ， 因 为 尺寸 仅仅 16 像 素 ， 我 
们 胡萝卜 般 的 手指 很 容易 点 不 中 ， 甚 至 点 到 后 面 的 输入 框 上 ， 那 就 尴 
i 


稳妥 的 方法 是 外 部 再 嵌 套 一 层 标签 ， 专 门 控制 点 击 区 域 大 小 。 如 
果 对 代码 要 求 较 高 ， 则 可 以 使 用 padding 或 者 透明 border 增 加 元 素 的 
点 击 区 域 大 小 。 


其 中 ， 首 推 透明 border 方 法 ， 原 因 很 简单 ， 假 设 我 们 的 图 标 是 使 
用 工具 生成 的 ， 那 么 background-position 就 是 限定 死 的 值 ， 若 再 
使 用 padding 撑 开间 距 ， 就 会 遇 到 定位 不 准 的 问题 。 但 是 ， 敬 是 使 用 
透明 border 增 加 点 击 区 域 ， 则 无 此 问题 ， 只 要 合并 时 留 下 足够 的 间距 
就 可 以 了 。 
,icon-clear { 


width: 16px; 
height: 16px; 


border: 11px solid transparent; 


此 时 ， 点 击 区 域 大 小 从 16x16 一 下 子 提升 到 38x38， 显 然 更 容易 被 点 中 
了 。 


在 现代 浏 贤 器 下 手动 输入 http:/demo.cssworld.cn/4/4-2.php 或 者 扫 
下 面 的 二 维 码 。 现 在 的 点 击 区 域 如 图 4-71 所 示 。 


我 是 初始 值 人 


图 4-71 清除 按钮 点 击 区 域 优雅 增加 


3. 三 角 等 图 形 绘制 


即使 在 移动 端 ， 使 用 CSS 的 border 属 性 绘制 三 角形 等 图 形 仍 是 性 
价 比 最 高 的 方式 。 例 如 ， 一 个 朝 下 的 等 腰 直 角 三 角形 ， 直 接 用 : 


div { 
width: 09; 


border: 10px solid; 
border-color: #f30 transparent transparent; 


则 有 图 4-72 所 示 的 效 采 。 


可 


图 4-72 ” 旨 下 的 三 角 歼 果 


4.4.5 border 与 图 形 构建 


border 属 性 可 以 轻松 实现 兼容 性 非常 好 的 三 角 图 形 效果 ， 为 什么 
可 以 呢 ? 其 底层 原因 受 inset/outset 等 看 上 去 没有 实用 价值 的 
border-sty1le 属 性 影响 ， 边 框 3D 效 果 在 互联 网 早期 其 实 还 是 挺 潮 
的 ， 那 个 时 候 人 们 喜欢 有 质感 的 东西 ， 为 了 呈现 逼真 的 3D 效 果 ， 目 然 
在 边框 转角 的 地 方 一 定 要 等 分 平滑 处 理 ， 然 后 不 同 的 方向 赋予 不 同 的 
颜色 。 然 后 ， 这 一 转角 规则 也 被 solid 类 型 的 边框 给 沿用 了 。 因 此 ， 
我 们 就 不 难 理解 下 面 的 4 色 边 框 的 表现 了 : 


div { 
width: 10px; height: 10px; 


border: 10px solid; 
border-color: #f30 #00f #396 #0f0; 


} 


效果 如 图 4-73 所 示 。 


此 时 ， 如 果 设 置 左 右 下 3 个 方 同 边 框 色 为 透明 ， 是 不 是 束 是 一 个 梯 
形 了 ? 


div { 
width: 10px; height: 10px; 
border: 10px solid; 
border-color: #f30 transparent transparent; 


} 


效果 如 图 4-74 所 示 。 


图 4-73 ” 实 色 边框 的 转角 连接 表现 


，_4 


人 


图 4-74 三 个 方向 边框 透明 下 的 梯形 效果 


此 时 ， 再 进一步 ， 宽 度 从 10px 变 成 0，， 是 不 是 上 面 梯形 下 方 的 开 
口 也 束 从 10px 变 成 0 了 ? 是 不 是 三 角形 效 琳 束 出 现 了 ? 


div { 
width: 09; 


border: 10px solid; 
border-color: #f30 transparent transparent; 


} 


效果 如 图 4-75 所 示 。 


有 


图 4-75 ” 朝 下 的 三 角 效 果 


a 


当然 ， 我 们 还 可 以 让 垂直 方向 的 边框 宽度 更 宽 一 点 ， 这 样 三 角形 
束 会 更 加 狭长 : 


div { 
width: 09; 
border-width: 10px 20px; 


border-style: solid; 
border-color: #f30 transparent transparent; 


效果 如 图 4-76 所 示 。 
又 或 者 是 仅仅 让 两 个 方 癌 的 边框 透明 : 


div { 
width: 09; 
border-width: 10px 20px; 


border-style: solid; 
border-color: #f30 #f30 transparent transparent; 


效果 如 图 4-.77 所 示 。 这 种 三 角形 可 以 作为 类 似 于 如 图 4-78 所 示 对 话 框 的 
尖 角 。 


图 4-76 ”更 罕 的 三 角 图 形 


图 4-77 “一 侧 开口 的 三 角 图 形 效果 


如 有 果 把 两 个 不 同 倾斜 角度 的 三 角 效 果 受 加 ， 则 可 以 实现 更 加 刁钻 
的 尖 角 效果 ， 如 图 4-79 所 示 。 


相 邻 边框 尖 角 实现 的 气泡 对 话 框 效果 


图 4-78 ”一 侧 开 口 的 三 角 图 形 实 际 应 用 


图 4-79 ”三 角 欠 加 图 形 效 果 


甚至 我 们 可 以 借助 border 生 成 的 梯形 实现 包括 IE8 浏 览 如 在 内 的 
小 圆 角 效果 ， 手 动 输入 http://demo.cssworld.cn/4/4-3.php 或 者 扫 右 侧 的 二 
维 码 。IE8 浏 览 器 下 的 效果 如 果 4-80 所 示 。 上 面 的 2 像素 圆 角 实 现 原理 如 
图 4-81 所 示 。 


我 是 按钮 


图 4-80 border 实现 圆 角 效果 


人 before 生成 樟 ul f 上 @ 房 


图 4-81 border 实现 圆 角 原理 示意 


_ > 9fter 休 成 榜 形 下 国外 


只 要 十 与 三 角形 或 者 柳 形 相关 的 图 形 ， 部 可 以 使 用 border 属 性 来 
模拟 。 


4.4.6 border 等 高 布局 技术 


margin+padding 可 以 实现 等 高 布局 ， 同 样 ，border 属 性 也 可 
以 实现 等 高 布局 。 


想 看 效果 ， 手 动 输入 http://demo.cssworld.cn/4/4-4.php 或 者 扫 右 侧 的 
二 维 码 。 点 击 两 个 按钮 ， 随 意 增 加 数目 ， 会 发 现 两 栏 的 背景 色 区 域 高 


度 永 远 都 是 一 样 的 ， 如 图 4-82 所 示 。 


模块 1 


图 4-82 border 等 高 布局 效果 


核心 CSS 代 码 如 下 : 


.box { 
border-left: 150px solid #333; 


background-color: #fQOf3f9; 


,box > nav { 
width: 150px; 
margin-left: -150px; 
float: left; 


,box > Section { 
overflow: hidden， 


也 就 是 说 ， 左 侧 深 色 背 景区 域 是 由 border -left 属 性 生成 的 。 元 
素 边 框 高 度 总 是 和 元 素 目 身高 度 保持 一 任 ， 因 此 可 以 巧妙 地 实现 等 高 
布局 效 末 。 


此 方法 要 想 生 效 ， 有 一 点 需要 注意 ， 父 级 容器 不 能 使 用 
overf1Jlow:hidden 请 除 浮 动 影响 ， 因 为 次 出 隐藏 是 基于 padding box 


三 | 

证 
的 ， 如 果 设 置 了 overflow:hidden， 则 左 浮动 的 导航 列表 元 素 就 会 
被 隐藏 挥 ， 这 显然 不 古 我 们 想 要 的 效 末 。 


此 方法 与 用 margin+padding 实 现 的 等 高 布局 相 比 更 加 稳健 ， 不 
会 出 现 销 点 定位 市 来 的 问题 ， 但 同样 它 也 十 有 局 限 性 的 。 


首先 ， 由 于 border 不 支持 百分比 宽度 ， 因 此 ， 适 合 至 少 一 栏 是 害 
党 的 布局 。 当然 ， 如 来 不 考虑 IE8 浏 览 融 ， 可 以 试 试 使 用 vw 单位 ， 其 可 
实现 近似 的 百分比 宽度 效果 。 


其 次 ， 等 高 布局 的 栏目 有 限制 。 因 为 一 个 元 素 的 边框 数目 是 有 限 
的 ， 基 本 上 ，border 等 高 布局 只 能 满足 2~3 栏 的 情况 ， 除 非 正 好 是 等 
比例 的 ， 那 还 可 以 使 用 border-style:double 实 现 最 多 7 栏 布局 ， 
但 这 只 是 理论 上 而 已 。 所 以 ,一旦 等 高 布局 栏目 过 多 ， 则 建议 使 用 
table-cell 等 高 布局 或 者 margin 负 值 等 高 布局 。 


最 终 如 何 选 型 ， 还 是 要 看 设计 需求 和 产品 的 兼容 性 要 求 。 


[1] MDN 上 说 ， 要 想 IE8 兼 容 ， 这 里 逗号 后 面 的 空格 要 去 掉 ， 但 是 本 
人 通过 IE11 浏 览 器 的 下 8 模式 看 ， 无 此 问题 。 本 着 求知 的 精神 ， 我 义 打 


开 目 己 已 经 落 灰 的 10 年 前 的 笔记 本 ， 使 用 原生 IE8 浏 览 硕 测试 了 一 下 ， 
结果 也 是 没有 问题 ， 因 此 ，MDN 上 的 说 法 可 以 忽略 。 


第 5 章 ”内 联 元 素 与 流 


块 级 元 素 仙 员 结构， 内 联 元 素 接 管内 容 ， 而 CSS 世 界 钙 面向 图 文 
疡 排 ， 也 就 古 内 联 元 素 设计 的 ， 由 此 可 见 ， 本 草 内 容 在 整个 CSS 世 界 
体系 中 占有 非常 重要 的 位 置 。 


字母 x 一 CSS 世界 中 隐匿 的 举足轻重 的 角 


我 们 这 里 的 字母 x 就 是 26 个 英文 字母 中 的 x。 由 于 目 身 形态 的 一 些 
特殊 性 ， 这 个 小 小 的 不 起 眼 的 字母 担当 大 任 ， 在 CSS 世 界 中 扮演 了 一 
个 重要 的 角色 。 


可 能 有 人 的 第 一 反应 是 :“ 我 知道 ， 可 以 模拟 关闭 按钮 的 那个 叉 又 
效果 ! ” 


这 位 朋友 思维 很 活跃 ， 但 是 ， 我 们 这 里 说 的 并 不 是 字母 x 在 CSS 世 
界 中 的 奇 技 泽 巧 ， 而 是 正统 的 术语 上 的 紧密 联系 。 


5.1.1 ”字母 x 与 CSS 世 界 的 基线 


在 各 种 内 联 相 关 模 型 中 ， 几 是 涉及 五 直方 向 的 排版 或 者 对 齐 的 ， 
都 离 不 开 最 基本 的 基线 (baseline) 。 例 如 ，1Line-height 行 高 的 定 
义 就 是 两 基线 的 间距 ，vertical-align 的 默认 值 就 是 基线 ， 其 他 中 


线 顶 线 一 类 的 定义 也 离 不 开 基线 ， 基 线 甚 至 衍生 出 了 很 多 其 他 基线 概 
念 〈 如 图 5-1 所 示 ) 


a. “字母 ”基线 (英文 ) b. “悬挂 ”基线 (印度 广 》 c. “表意 ”基线 〈 中 文 ) 


图 5-1 些 基线 示意 


那 大 家 知道 基线 又 是 如 何 定义 的 吗 ? 基线 的 定义 就 离 不 开本 文 的 
主角 x。 


字母 x 的 下 边缘 ( 线 ) 就 是 我 们 的 基线 。 


对 ， 是 字母 x， 不 是 s 之 类 下 面 有 尾巴 的 字母 ， 参 见 如 图 5-2 所 示 的 
标示 。 
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图 5-2 ”CSS 中 的 基线 示意 


5.1.2 ”字母 x 与 CSS 中 的 x-height 


字母 x 与 CSS 的 故事 远 不 止 基线 这 么 简单 。CSS 中 有 一 个 概念 叫 作 
x-height， 指 的 是 字母 x 的 高 度 。 


有 人 可 能 会 有 疑问 了 : “一 个 字母 的 高 度 跟 CSS 布 局 排版 有 什么 天 
系 啊 ? ”实际 上 关系 可 大 了 。 


首先 需要 了 解 一 下 x-height 的 含义 。 通 俗 地 讲 ，x-height 指 
的 就 是 小 写字 母 x 的 高 度 ， 术 语 描述 就 是 基线 和 等 分 线 (mean line) 
(也 称 作 中 线 ，midline) 之 间 的 距离 。 


维基 上 有 一 个 示意 图 ， 如 图 5-3 所 示 。Xx-height 的 示意 范围 一 目 


ascent ascender height 


cap height 


mean line median x-height 


baseline 


descent descender height 


图 5-3 x-height 示 意 


图 5-3 中 还 出 现 了 其 他 的 名 词 ， 这 里 简单 说 一 下 我 的 理解 。 


ascender height: 上 下 线 高 度 。 
cap height: 大 写字 母 高 度 。 
median: 中 线 。 

descender height: 下 行 线 高 度 。 


CSS 中 有 些 属性 值 的 定义 就 和 这 个 x-height 有 关 ， 最 典型 的 代 
表 就 是 vertical-align:middle。 这 里 的 middle 是 中 间 的 意思 。 


注意 ， 跟 上 面 的 median (中 线 ) 不 是 一 个 意思 。 在 CSS 世 界 中 ， 
middle 指 的 是 基线 往 上 1/2 x-height 高 度 。 我 们 可 以 近似 理解 为 字 
母 x 交 叉 点 那个 位 置 。 


由 此 可 见 ，vertical-align:middle 并 不 是 绝对 的 垂直 居中 
对 齐 ， 我 们 平常 看 到 的 middle 效 果 只 是 一 种 近似 效果 。 原 因 很 简 
单 ， 因 为 不 同 的 字体 在 行内 盒子 中 的 位 置 是 不 一 样 的 ， 比 如 , “微软 雅 
黑 ”* 就 是 一 个 字符 下 沉 比 较 明 显 的 字体 ， 所 有 字符 的 位 置 都 比 其 他 字体 
要 偏 下 一 点 儿 。 也 就 是 说 , “微软 雅 黑 ”字体 的 字母 x 的 交叉 点 是 在 容 屁 
中 分 线 的 下 面 一 点 。 此 时 ， 我 们 就 不 难 理解 为 什么 vertical- 
align:middle 不 是 相对 容器 中 分 线 对 齐 的 了 ， 因 为 在 毕竟 CSS 世 界 
中 文字 内 容 是 主体 ， 所 以 ， 对 于 内 联 元 素 垂 直 居 中 应 该 是 对 文字 ， 而 
非 居 外 部 的 块 级 容器 所 言 。 


5.1.3 ”字母 x 与 CSS 中 的 ex 


字母 x 衍生 出 了 x-height 概 念 ， 并 在 这 个 基础 上 深耕 细作 ， 进 一 
步 衙 生出 了 ex。 注 意 ， 这 里 的 ex 是 CSS 中 地 地 道道 的 一 个 尺寸 单位 。 


大 家 可 能 都 听 过 和 用 过 em、px 和 rem， 但 对 连 IE6 都 老 早 支持 的 
exX 单 位 却 很 陌生 。 


ex 十 CSS 中 的 一 个 相对 单位 ， 指 的 是 小 写字 母 x 的 高 度 ， 没 错 ， 就 


是 指 x-height。 


那 这 个 单位 有 什么 实际 用 途 呢 ? 存在 必 有 价值 ! 用 得 少 ， 并 不 表 
示 其 没有 作用 ， 只 是 因为 我 们 并 没有 好 好 地 理解 它 、 挖 据 它 。 我 们 细 


细 思 考 字 母 x 在 CSS 世 界 中 扮演 的 角色 ， 吕 会 发 现 ex 的 价值 所 在 。 


注意 ， 里 然 说 em、px 这 类 单位 的 主要 作用 是 限定 元 素 的 尺寸 ， 但 
古 ， 由 于 字母 x 受 字 体 等 CSS 属 性 影响 大 ， 不 稳定 ， 因 此 ex 不 太 适 合 
来 限定 元 素 的 尺寸 。 那 问题 来 了 : ex 连 自己 的 本 职工 作 都 做 不 好 ， 难 
道 还 指望 其 副业 开 挂 ? 


没 错 ，ex 的 价值 束 在 其 副业 上 
素 的 垂直 居中 对 齐 效果 。 


不 受 字 体 和 字号 影响 的 内 联 元 


我 们 都 知道 ， 内 联 元 素 默认 是 基线 对 齐 的 ， 而 基线 就 是 x 的 底部 ， 
而 1ex 束 是 一 个 x 的 高 度 。 设 想 一 下 ， 假 如 图 标高 度 就 是 L1ex， 同 时 青 
景 独 片 居中 ， 电 不 是 独 标 和 文字 天 然 牌 直 居 中 ， 而 且 完 全 不 受 字 体 和 
字号 的 影响 ? 因为 ex 吏 是 一 个 相对 于 字体 和 字号 的 单位 。 


文字 表述 比较 苍白 ， 我 们 来 看 一 个 例子 。 图 5-4 所 示 的 文字 后 面 跟 
着 一 个 小 三 角形 图 标的 效果 是 非常 常见 的 。 现 在 ， 要 让 该 图 标 和 文字 
中 间 位 置 对 齐 ， 你 会 如 何 实现 ? 设 定好 尺寸 ， 然 后 使 用 vertical- 
align:middle? 这 样 虽然 也 有 效果 ， 但是， 实际 上 哆 喧 了 ， 借 助 ex 
单位 ， 我 们 直接 利用 默认 的 baselLine 基 线 对 齐 就 可 以 实现 这 个 效 
果 o 


每 页 显示 15 


图 5-4 ”文字 与 小 三 角 图 标 


CSS 代 码 如 下 : 


.icon-arrow { 
display: inline-block; 
width: 20px; 


height: 1ex; 
background: url(arrow.png) no-repeat center; 


然后 就 对 齐 了 ， 完 全 没有 vertical-align 出 场 的 机 会 。 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/5/1-1.php 或 者 扫 右 侧 
的 二 维 码 。 你 会 发 现 ， 就 算 我 们 把 字体 修改 ， 把 字号 设置 得 很 大 ， 对 
齐 依然 恨 好 ， 如 图 5-5 所 示 。 


zhangxinxu 


图 5-5 ”使 用 e 


单位 对 齐 不 受 字体 和 字号 影响 


5.2 ”内 联 元 素 的 基石 ]ine-height 


x 


本 节 中 line-height 的 内 容 会 涉及 很 多 内 联 盒 模型 的 知识 ， 
此 ， 务 必 先 要 掌握 3.4.2 节 关于 内 联合 模型 的 知识 。 男 外 ， 下 文中 所 有 


一 一 


的 “ 行 高 ” 指 的 就 是 Line-height 。 
5.2.1 内 联 元 素 的 高 度 之 本 一 line-height 


先 思考 下 面 这 个 问题 : 默认 空 <div> 高 度 是 0， 但 是 一 旦 里 面 写 
上 几 个 文字 ，<div> 高 度 承 有 了 ， 请 问 这 个 高 度 由 何 而 来 ， 或 者 说 是 
由 哪个 CSS 属 性 决定 的 ? 


如 果 仅 仅 通过 表象 来 确认 ， 估 计 不 少 人 会 认为 <div> 高 度 是 由 里 
面 的 文字 撑 开 的 ， 也 就 是 font -size 决 定 的 ， 但 本 质 上 是 由 1Line- 
height 属 性 全 权 决 定 的 ， 尽 管 某 些 场景 确实 与 font -size 大 小 有 
a 


我 们 不 妨 设 计 一 个 简单 的 例子 来 看 看 真相 完 苋 是 什么 。 例 如 : 


<div class="test1"> 我 的 高 度 是 ? </div> 
.test1 { 
font-size: 16px; 
line-height: 0; 
border: 1px solid #ccc; 
background: #eee; 


<div class="test2"> 我 的 高 度 是 ? </div> 
‘test1 { 
font-size: 0; 
line-height: 16px; 
border: 1px solid #ccc; 
background: #eee,; 


} 


这 两 段 代码 的 区 别 在 于 一 个 Line-height 行 高 为 9， 一 个 font - 
size 字 号 为 0° 结果 ， 第 一 段 代 码 ， 最 后 元 素 的 高 度 只 璋 下 边框 那么 
丁点 儿 ， 而 后 面 一 段 代码 ， 虽 然 文 字 小 到 都 看 不 见 了 ， 但 是 16px 的 内 
部 高 度 依然 坚挺 ， 如 图 5-6 所 示 。 


我 的 高 度 是 了 


图 5-6 ”文字 高 度 本 质 上 由 行 高 决定 


很 显然 ， 从 上 面 这 个 例子 可 以 看 出 ，<div> 高 度 是 由 行 高 决定 
的 ， 而 非 文 字 。 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/5/2-1.php 或 者 扫 右 侧 
的 二 维 码 。 


下 面 要 说 一 些 很 有 意思 的 结论 ， 对 于 非 替 换 元 素 的 纯 内 联 元 素 ， 
其 可 视 高 度 完全 由 1ine-height 决 定 。 注 意 这 里 的 措辞 一 一 “完全 ”， 


什么 padding、border 属 性 对 可 祝 高 度 是 没有 任何 影响 的 ， 这 也 是 
我 们 平常 口中 的 “ 盒 模 型 "约定俗成 说 的 是 块 级 元 素 的 原因 。 


因此 ， 对 于 文本 这 样 的 纯 内 联 元 素 ，Line-height 就 是 高 度 计 
算 的 基石 ， 用 专业 说 法 就 是 指定 了 用 来 计算 行 框 盒子 高 度 的 基础 高 
度 。 比 方 说 ，1line-height 设 为 16px， 则 一 行文 字 高 度 是 16px， 两 
行 束 是 32px， 三 行 就 是 48px， 所 有 浏览 器 泻 染 解 析 都 是 这 个 值 ，1 像 
素 都 不 差 。 


那 如 采 是 蔡 换 元 系 ， 又 或 者 是 块 级 元 素 ，Line-height 在 其 中 
又 扮演 什么 角色 呢 ? 


在 回答 这 个 问题 之 前 ， 我 们 最 好 先 把 1ijne-height 作 用 于 内 联 
元 素 的 细节 给 搞 明 白 。 

通常 ，]1ine-height 的 高 度 作 用 细节 都 是 使 用 “行距 * 和 “ 半 行 
距 ” 来 解释 的 。 那 么 什么 是 “行距 *"， 什 么 又 是 “ 半 行 距 ” 呢 ? 


首先 大 家 需要 明确 这 一 点 : 字体 设计 以 及 文字 排版 是 门 很 深入 的 
学 问 ， 英 文 和 中 文 双 有 很 多 不 同 之 处 ， 但 是 ， 我 们 平 营 构建 页 面 无 须 
如 此 事 无 巨细 的 知识 。 因 此 ， 这 里 只 简单 介绍 部 分 知识 ， 方 便 大 家 理 
解 某 些 行为 和 特性 ， 更 多 内 容 会 在 第 8 草 中 披露 。 


我 个 人 是 这 么 认为 的 : 内 联 元 素 的 高 度 由 固定 高 度 和 不 固定 高 度 
组 成 ， 这 个 不 国定 的 部 分 吏 是 这 里 的 “行距 ”。 换 名 话说 ，1Line- 
height 之 所 以 起 作用 ， 束 是 通过 改变 “行距 ?来 实现 的 。 


中 国 古代 四 大 发 明之 一 的 活字 印刷 术 使 用 的 苹 雕刻 好 的 胶泥 子 
模 ， 大 家 可 以 回忆 一 下 北 泵 奥运 会 开幕 式 上 活字 印刷 术 表 演 中 那些 凸 
起 的 方块 ， 它 使 用 的 字体 是 宋体 ， 注 意 ， 古 宋体 。 然 而 ， 如 果 这 些 方 
块 都 是 密 密 厅 厅 无 缝 际 铺 在 一 起 ， 印 出 来 的 文字 吏 是 方 方 正 正 的 一 
团 ， 那 么 我 们 会 无 法 一 眼看 出 应 该 横着 读 还 是 坚 着 念 。 要 知道 古人 的 
排版 是 坚 排 的 ， 但 我 们 去 看 古人 的 印刷 作品 却 不 会 错误 地 横着 看 ， 为 
什么 呢 ? 因为 印 出 来 的 文字 垂直 方 癌 确实 一 个 接着 一 个 ， 但 是 ， 水 平 
方向 ， 列 与 列 之 间 却 有 着 明 显 的 间 际 ， 如 岁 5-7 所 示 ， 这 个 间 隐 其 实 残 
征 “ 行 距 ”。 


图 5-7 ”活字 印刷 之 列 间 距 


所 以 ,“ 行 距 ” 的 作用 是 可 以 瞬间 明确 我 们 的 阅读 方向 ， 让 我 们 阅 
读 文 字 更 轻松 。 在 CSS 世 界 中 ,“ 行 距 ? 其 实 也 是 类 似 的 东西 ， 但 还 是 
有 些 差别 的 。 以 水 平 阅 读 流 举 例 ， 传 统 印 刷 的 “行距 ”是 上 下 两 行文 字 
之 间 预 留 的 则 际 ， 古 个 独立 的 区 域 ， 也 就 意味 着 第 一 行文 字 的 上 方 古 
没有 “行距 ?的 ;但 是 在 CSS 中 ,“ 行 距 ? 分 散在 当前 文字 的 上 方 和 下 
方 ， 也 就 是 即使 是 第 一 行文 学 ， 其 上 方 也 是 有 “行距 ”的 ， 只 不 过 这 


个 “行距 ?的 高 度 仅 仅 是 完整 “行距 ?高 度 的 一 半 ， 因 此 ， 也 被 称 为 " 半 行 
距 ”。 


人 总 是 先入 为 主 ， 尤 其 是 前 端 人 员 ， 排 版 知识 的 获取 基本 上 都 是 
从 CSS 实 际 工 作 中 来 ， 束 会 很 目 然 地 认为 “间距 就 古 应 该 上 下 等 分 
啊 ”， 实 际 上 太 天 真 了 ， 且 先 不 说 传统 印刷 的 “行距 * 在 中间 ， 著 名 的 排 
版 软件 Adobe InDesign 的 “行距 ”就 是 加 在 文字 上 方 的 ， 所 以 没有 什么 理 
所 当然 。 


现在 知道 了 CSS 的 “ 半 行 距 *"， 那 么 哪里 到 哪里 才 是 “ 半 行 距 * 的 高 

度 范围 呢 ? 一 般 业 界 的 共识 是 : 行距 = 行 高 -em-box。 转 换 成 CSS 语 言 
就 是 : 行距 = line-height - font-size。 其 中 em-box 是 CSS 世 
界 中 比较 虚 的 一 个 概念 ， 说 “ 虚 ” 并 不 是 胡 编 乱 造 的 意思 ， 而 是 我 们 无 
法 有 效 感知 这 个 盒子 具体 的 位 置 在 哪里 ， 但 是 有 一 点 可 以 明确 ， 就 是 
其 高 度 正好 就 是 lem。em 是 一 个 相对 font -size 大 小 的 CSS 单 位 ， 
此 1em 等 用 于 当前 一 个 font -size 大 小 ， 这 就 是 “行距 = line- 
height - font-size” 这 个 公式 的 由 来 。 有 了 “行距 >， 我 们 一 分 为 
二 ， 就 有 了 “ 半 行 距 *"， 分 别 加 在 em-box 上 面 和 下 面 就 构成 了 文字 的 完 
整 高 度 了 。 话 虽 这 么 讲 ， 但 一 旦 不 弄 清楚 em-box 究 竞 在 什么 位 置 ， 我 
们 束 无 法 在 脑 中 形成 关于 行 高 的 具象 认 知 ， 知 识 很 容易 遗 起 。 


人 很 容易 被 肉眼 所 见 的 东西 迷惑 ， 因 此 ， 很 多 人 会 把 文字 图 形 区 
域 看 成 十 em-box 范 围 ， 实 际 上 这 是 不 正确 的 ， 比 方 说 ， 一 些 市 尾巴 的 
英文 字符 q 或 者 g， 其 小 尾巴 是 在 em-box 范 围 之 外 的 ， 而 对 于 汉字 ， 很 
多 字体 图 形 高 度 实 际 上 要 小 于 em-box 高 度 的 。 


此 时 ， 就 轮 到 内 容 区 域 (content area) 出 马 了 。 在 本 书 中 ， 内 容 
区 域 可 以 近似 理解 为 FirefoxIE 浏 贤 右 下 文本 选中 市 背景 色 的 区 域 。 这 
么 理解 的 重要 原因 之 一 就 是 可 见 ， 这 对 于 我 们 深入 理解 内 联 元 素 知 识 
非常 有 帮助 。 


大 多 数 场景 下 ， 内 容 区 域 和 em-box 是 不 一 样 的 ， 内 容 区 域 高 度 受 
font-family 和 font-size 双 重 影响 ， 而 em-box 仅 受 font -size 影 
响 ， 通 常 内 容 区 域 高 度 要 更 高 一 些 。 除 了 下 面 这 种 情况 ， 也 就 是 “ 当 我 
们 的 字体 是 宋体 的 时 候 ， 内 容 区 域 和 em-box 是 等 同 的 "， 因 为 宋体 是 一 
种 正统 的 印刷 字体 ， 方 方正 正 ， 所 以 千 万 不 要 小 看 宋体 。 


于 是 ， 利 用 我 们 平常 不 得 见 的 宋体 ， 束 能 准确 揪 出 “ 半 行 距 ” 的 藏 
身 之 所 了 ， 测 试 代码 如 下 : 


.test { 
font-family: simsun; 
font-size: 24px; 
line-height: 36px; 
background-color: yellow; 


.test > span { 
background-color: white; 


<div class="test"> 
<span>sphinx</span> 
</div> 


此 时 ， 平 常 虚 无 的 em-box 借 助 内 容 区 域 (图 5-8 中 字符 sp 的 选中 区 域 ) 
又 露出 了 庐山 真面目 ,“ 半 行距 ?也 准确 显现 出 来 了 ， 如 图 5-8 右 侧 标 
全 


1Ine-helght:120px 


半 行 间距 


图 5-8” 半 行 间距 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/5/2-2.php。 


学 习 基础 理论 知识 的 好 处 之 一 号 是 可 以 更 准确 地 进行 技术 实践 ， 
比方 说 这 里 ， 我 们 知道 “ 半 行 距 ” 的 位 置 和 范围 ， 束 可 以 更 准确 地 帮助 
我 们 还 原 设计 。 


可 能 是 由 于 CSS 开 发 人 员 不 够 专注 细致 ， 外 加 规范 设计 本 和 喘 的 原 
因 ， 设 计 师 往往 会 对 各 个 元 素 间 的 距离 间隙 标注 得 很 清晰 。 但 是 ， 设 
计 师 并 不 是 开发 人 员 ， 他 们 并 没有 把 网 页 中 无 处 不 在 行 间距 考虑 在 
内 ， 所 有 与 文字 相关 的 间距 都 是 从 文字 的 上 边缘 和 下 边缘 开始 标注 
的 。 除 非 我 们 全 局 行 高 设置 为 line-height :1， 否 则 这 些 标注 的 距 
离 和 我 们 使 用 的 margin 间 距 都 是 不 一 致 的 。 


但 是 ， 如 果 我 们 理解 了 半 行 距 ， 结 合 我 们 网 页 中 的 设置 的 Line - 
height 大 小 ， 就 能 根据 标注 获取 准确 的 间距 值 。 举 个 例子 ， 假 设 
line-height 是 1,5，font-size 大 小 是 14px， 那 么 我 们 的 半 行 距 
大 小 就 是 (套用 上 面 的 行距 公式 再 除 以 2) : (14px * 1.5 - 
14px) / 2 = 14px * 0.25 = 3.5px° border 以 及 line- 


height 等 传统 CSS 属 性 并 没有 小 数 像素 的 概念 “从 CSS3 动 画 的 细腻 

程度 可 以 看 出 ) ， 因 此 ， 这 里 的 3 .5px 需 要 取 整 处 理 ， 如 果 标 注 的 是 
文字 上 边 距 ， 则 向 下 取 整 ,如果 是 文字 下 边 距 ， 则 向 上 取 整 ， 因 为 绝 
大 多 数 的 字体 在 内 容 区 域 中 都 是 偏 下 的 。 所 以 ， 假 设 设计 师 标注 了 文 
字 字 形 上 边缘 到 图 片 下 边缘 间距 20px， 则 我 们 实际 的 margin-top 值 
应 该 是 17px， 因 为 3.5px 向 下 取 整 是 3px。 


下 面 回 到 最 初 的 问题 ，Line-height 如 何 通过 改变 行距 实现 文 
字 排 版 ? 当 1ine-height 设 为 2 的 时 候 ， 半 行距 是 一 半 的 文字 大 小 ， 
两 行文 字 中 间 的 间 隐 差不多 一 个 文字 尺寸 大 小 ;， 如果 1Line-height 
大 小 是 1 倍 文 字 大 小 ， 则 根据 计算 ， 半 行距 是 0， 也 就 是 两 行文 字 会 紧 
密 依 假 在 一 起 ， 如 果 line-height 值 是 9.5， 则 此 时 的 行距 就 是 负 
值 ， 虽然 line-height 不 文 持 负 值 ， 但 是 行距 可 以 为 负 值 ， 此 时 ， 
两 行文 字 束 是 重 车 纠缠 在 一 起 。 具 体 表现 如 图 5-9 所 示 。 图 5-9 有 对 应 
的 实例 页 面 ， 有 兴趣 的 话 可 以 手动 输入 http://demo.cssworld.cn/5/2- 
3.php 或 者 扫 下 面 的 二 维 码 。 


图 5-9 1Line-height 通 过 控制 行距 实现 文字 排版 


说 完了 内 联 元 素 ， 下 面 轮 到 奉 换 元 素 和 块 级 元 素 了 。 


关于 替换 元 素 的 高 度 与 1ine-height 的 关系 首先 需要 弄 明白 这 
个 问题 : Line-height 可 以 影响 替换 元 素 (如 图 片 的 高 度 ) 吗 ? 管 
案 是 ， 不 可 以 ! 


可 能 有 人 会 反驳 了 ， 不 会 呀 ， 你 看 下 面 这 个 例子 : 


.box { 
line-height: 256px; 


<div class="box"> 
<img src="1.jpg" height="128"> 
</div> 


<div> 元 素 中 ， 束 一 张 图 片 ， 其 他 什么 都 没有 ， 但 此 时 . box 元素 高 度 
却 是 256px， 难 道 不 是 line-height 把 图 片 占 据 的 高 度 变 高 了 吗 ? 


不 是 的 ,不 古 line-height 把 图 片 占据 高 度 变 高 了 ， 而 是 把 “ 绩 
灵 空 日 节 后 ”的 高 度 变 高 了 。 图 片 为 内 联 元 素 ， 会 构成 一 个 “ 行 框 使 
于”， 而 在 HTML5 文 档 模 式 下 ， 每 一 个 “ 行 框 盒子 ”的 前 面部 有 一 个 宽 
度 为 6 的 "幽灵 空白 斑点 "， 其 内 联 特性 表现 和 普通 字符 一 模 一 样 ， 所 
以 ， 这 里 的 容器 高 度 会 等 于 Line-height 设 置 的 属性 值 256px 。 


实际 开发 的 时 候 ， 图 文 和 文字 混在 一 起 是 很 常见 的 ， 那 这 种 内 联 
丛 换 元 素 和 内 联 非 蔡 换 元 率 在 一 起 时 的 高 度 表 现 又 是 皇 样 的 呢 ? 


由 于 同属 内 联 元 素 ， 因 此 ， 会 共同 形成 一 个 “ 行 框 合子”*”，line- 
height 在 这 个 混合 元 素 的 “ 行 框 盒子 ”中 扮演 的 角色 是 决定 这 个 行 盒 的 
最 小 高 度 ， 听 上 去 似乎 有 点 儿 揽 罚 ， 对 于 纯 文 本 元 素 ，1ine- 
height 非 党 威风 ， 直 接 决 定 了 最 终 的 高 度 。 但 是 ， 如 采 同 时 有 替换 
元 素 , 则 1ine-height 的 表现 一 下 子 弱 了 很 多 ， 只 能 决定 最 小 高 
度 ， 对 最 终 的 高 度 表现 有 望 生 莫 及 之 感 。 为 什么 会 这 样 呢 ? 一 是 替换 
元 素 的 高 度 不 受 l]ine-height 影 响 ， 二 是 vertical-align 属 性 在 
背后 作 举 。 


对 于 这 种 混合 替换 元 素 的 场景 ，Line-height 要 想 一 统 江 山 ， 
需要 值 足够 大 才 行 。 但 是 ， 实 际 开 发 的 时 候 ， 我 们 给 line-height 
设置 的 值 总 是 很 中 规 中 矩 ， 于 是 ， 就 会 出 现 类 似 下 面 的 场景 : 明明 文 
字 设 置 了 1Line-height 为 20pX， 但 是 ， 如 果 文 字 后 面 有 小 图 标 ， 最 

“ 行 框 盒子 "高度 却 是 21px 或 是 22px。 这 种 现象 背后 最 大 的 黑手 其 
实 是 vertical-align 属 性 ， 我 们 会 在 下 一 章 好 好 深入 剖析 为 什么 会 
有 这 样 的 表现 。 


对 于 块 级 元 素 ，1line -height 对 其 本 身 是 没有 任何 作用 的 ， 我 
们 平时 改变 1ine-height， 块 级 元 素 的 高 度 跟 着 变化 实际 上 是 通过 
改变 块 级 元 素 里 面 内 联 级 别 元 素 占 据 的 高 度 实现 的 。 


比方 说 ， 一 个 <p> 元 素 中 有 10 行 图 文 内 容 ， 则 这 个 <p> 元 素 的 高 
度 就 是 由 这 10 行 内 容 产 生 的 10 个 “ 行 框 盒子 ”高度 累加 而 成 ;一 个 


<article> 元 素 中 可 能 会 有 20 个 <p> 元 素 ， 则 这 个 <article> 元 素 
又 是 由 这 20 个 块 级 <p> 元 素 高 度 累加 而 成 ， 同 时 块 级 元 素 还 可 以 通过 
height 和 min-height 以 及 盒 模型 中 的 margin、padding 和 
border 等 属性 改变 占据 的 高 度 ， 所 有 这 一 切 就 构成 了 CSS 世 界 完整 的 
高 度 体系 。 


因为 line-height 几 乎 无 处 不 在 的 继承 特性 ， 并 且 CSS 世 界 是 为 
了 更 好 地 图 文 展示 ， 所 以 line-height 不 仅 是 内 联 元 素 高 度 的 基 
石 ， 而 且 还 是 整个 CSS 世 界 高 度 体系 的 基石 。 


5.2.2 ”为 什么 Line-height 可 以 让 内 联 元 素 “ 垂 直 居 中 ” 


坊间 流传 着 这 么 一 种 说 法 : “要 想 让 单行 文字 垂直 居中 ， 只 要 设置 
line-height 大 小 和 height 高 度 一 样 就 可 以 了 。” 类 似 下 面 这 样 的 
代码 : 


title { 
height: 24px; 


line-height: 24px; 


} 
从 效果 上 看 ,似乎 验证 了 这 种 说 法 的 正确 性 。 但 是 ， 实 际 上 ， 上 面 的 


说 法 对 CSS 初 学 者 会 产生 两 个 产 重 的 误导 ， 同 时 ， 语 名 本身 也 存在 不 
产 讶 的 地 方 ! 


误区 之 一 : 要 让 单行 文字 垂直 居中 ， 只 需要 Line-height 这 一 
个 属性 就 可 以 ， 与 height 一 点 儿 关系 都 没有 。 也 就 是 说 ， 我 们 直 


的 


title { 
line-height: 24px; 
} 


束 可 以 了 。 坊 间 传 闻 的 说 法 会 误导 大 小 一 定 要 同时 设置 height 属 性 
才 可 以 。 


误区 二 : 行 高 控制 文字 垂直 居中， 不 仪 适用 于 单行 ， 多 行 也 是 可 
以 的 。 准 确 的 说 法 应 该 是 "1ine-height 可 以 让 单行 或 多 行 元 素 近似 
垂直 居中 ”。 稍 等 ， 这 里 有 个 词 似乎 和 上 面 的 表述 有 点 儿 微 妙 的 差 
异 ,“ 近 似 垂直 居中 ”? 没 错 ， 一 定 要 加 上 “近似 二子， 这 样 的 说 法 才 
足够 严谨 。 换 句 话说， 我 们 通过 Line-height 设 置 的 垂直 居中 ， 并 
不 是 真正 意义 上 的 垂直 居中 ! 究竟 是 怎么 一 回 事 ? 


这 里 ， 其 实 要 解答 的 是 两 个 问题 ， 一 个 是 为 何 可 以 "垂直 居中 
另 一 个 是 为 何 是 < 近似 ”。 


正如 上 一 市 所 说 的 ， 没 有 什么 理所当然 ， 行 高 可 以 实现 “垂直 居 
中 ”原因 在 于 CSS$ 中 “行距 的 上 下 等 分 机 制 >， 如 采 行 距 的 添加 规则 是 在 
文字 的 上 方 或 者 下 方 ， 则 行 高 是 无 法 让 文字 垂直 居中 的 。 


说 “近似 ”是 因为 文字 字形 的 垂直 中 线 位 置 普 斋 要 比 真正 的 “ 行 框 金 
子 ” 的 垂直 中 线 位 置 低 ， 璧 如 我 们 拿 现在 用 得 比较 多 的 微软 雅 黑 字体 举 
例 : 


font-size: 80px; 

line-height: 120px; 
background-color: #666; 
font-family: 'microsoft yahei'; 
color: #fff; 


<p> 微 软 雅 黑 </p> 


结 末 ， 我 都 不 需要 标注 ， 肉 眼 束 能 看 出 字形 明显 侦 下 ， 如 图 5-10 所 


外 


微软 雅 尖 


图 5-10 ”line-height 与 位 置 下 沉 的 微软 雅 黑 字 体 


由 于 我 们 平时 使 用 的 font - size 都 比较 小 ，12px~16px 很 多 ， 
因此 ， 虽 然 微软 雅 黑 字体 有 下 沉 ， 但 也 就 1 像素 的 样子 ， 所 以 我 们 往往 
觉察 不 到 这 种 “垂直 对 齐 ” 其 实 并 不 是 真正 意义 上 的 垂直 居中 ， 只 是 感 
官 上 看 上 去 像 是 垂直 居中 罢了 。 这 也 是 我 总 是 称 1ine-height 实 现 
的 单行 文本 垂直 居中 为 “近似 垂直 居中 ”的 原因 。 


下 面 再 来 说 说 行 高 实现 多 行文 本 或 者 岁 片 等 替换 元 素 的 垂直 居中 
效果 实现 。 

多 行文 本 或 者 替换 元 素 的 垂直 居中 实现 原理 和 单行 文本 就 不 一 样 
了 ， 需 要 line-height 属 性 的 好 朋友 vertical-align 属 性 帮助 才 
可 以 ， 示 例 代 码 如 下 : 


.box { 
line-height: 120px; 
background-color: #fOf3f9; 


,Content { 
display: inline-block; 


line-height: 20pXx 
margin: 0 20px; 
vertical-align: middle; 


<div class="box"> 


<div class="content"> 基 于 行 高 实现 的 ,. .</div> 
</div> 


效果 如 图 5-11 所 示 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/5/2-4.php 或 者 扫 下 面 的 二 维 码 。 


基于 行 高 实现 的 穿行 文字 等 直 局 中 效 
时 ， 和 需要 vertical-align 属 性 帮助 。 


图 5-11 1ine-height 与 多 行文 字 垂直 居中 效果 


实现 的 原理 大 致 如 下 。 


(1) 多 行文 字 使 用 一 个 标签 包 庄 ， 然 后 设置 display 为 
inline-block。 好 处 在 于 既 能 重 置 外 部 的 Line-height 为 正常 的 


大 小 ， 叉 能 你 持 内 联 元 素 特 性 ， 从 而 可 以 设置 vertical-align 属 
性 ， 以 及 产生 一 个 非常 关键 的 “ 行 框 盒子 ”。 我 们 需要 的 其 实 并 不 是 这 
个 “ 行 框 盒子 >， 而 是 每 个 “ 行 框 盒子 "都 会 附带 的 一 个 产物 一 “幽灵 空 
日 节点 ”， 即 一 个 宽度 为 0、 表 现 如 同 普通 字符 的 看 不 见 的 “节点 *”。 有 
了 这 个 “幽灵 空白 节点 ”， 我 们 的 1ine- height:120px 就 有 了 作用 
的 对 象 ， 从 而 相当 于 在 . content 元 素 前 面 撑 起 了 一 个 高 度 为 120px 
的 宽度 为 9 的 内 联 元 素 。 


(2) 因为 内 联 元 素 默认 都 是 基线 对 齐 的 ， 所 以 我 们 通过 
对 .content 元 素 设置 vertical- align:middle 来 调整 多 行文 本 
的 垂直 位 置 ， 从 而 实现 我 们 想 要 的 “垂直 居中 ”效果 。 如 果 是 要 借助 
line-height 实 现 图 片 垂直 居中 效果 ， 也 是 类 似 的 原理 和 做 法 。 


细心 的 读者 可 能 发 现 ， 上 面 我 解释 原理 的 时 候 , “垂直 居中 ”这 4 个 
字 加 了 引号， 莫非 ， 这 里 的 “垂直 居中 ”又 是 “近似 ”? 


你 还 真 说 对 了 ， 这 里 实现 的 “垂直 居中 ”确实 也 不 是 真正 意义 上 的 
王 直 居中 ， 也 是“ 近似 垂直 居中 ”。 还 是 上 面 的 多 行文 本 垂直 居中 的 例 
子 ， 如 果 我 们 捕获 到 多 行文 本 元 素 的 尺寸 空间 ， 截 个 图 ， 然 后 通过 尺 
子 工 具 一 量 丈 会 发 现 ， 上 面 的 留 空 是 41px， 下 面 的 留 空 是 39px， 对 
啦 ， 原 来 不 是 完全 的 垂直 居中 ， 如 图 5-12 所 示 。 


图 5-12 ”上 下 留 白 大 小 是 不 一 样 的 


不 王 直 居中 与 ]ine-height 无 天 ， 而 是 vertical- align 导 
致 的 ， 有 具体 原因 我 们 将 在 5.3 节 讲解 。 


5.2.3 ”深入 line-height 的 各 类 属性 值 


line-height 的 默认 值 是 normal， 还 支持 数值 、 百 分 比值 以 及 
长 度 值 。 


首先 了 解 一 下 这 个 看 上 去 一 般 实 际 上 不 一 般 的 normal。 为 什么 
说 Line-height 的 默认 值 normal 不 一 般 呢 ? 因为 ， 本 质 上 ， 这 个 
normal 实 际 上 是 一 个 变量 。 我 想 ， 很 多 人 脑 中 的 想法 应 该 是 这 样 
的 : normal 应 该 对 应 一 个 具体 的 行 高 值 ， 按 照 经 验 差 不 多 1 倍 多 一 点 
儿 的 样子 ， 具 体 值 多 少 需 要 测试 一 下 才 知 道 。 实 际 上 非 也 ! normal 
实际 上 是 一 个 和 font -family 有 着 密切 关联 的 变量 值 。 什 么 意思 
呢 ? 比方 说 ,一 个 <div> 元 素 ， 有 两 段 对 比 CSS 如 下 : 


div { 
line-height: normal; 
font-family: "microsoft yahei'; 


div { 
line-height: 
font-family: 


} 


此 时 两 段 CSS 中 line-height 的 属性 值 normal 的 计算 值 是 不 一 样 
的 ， 表 5-1 给 出 的 是 我 在 儿 个 桌面 浏览 器 的 测试 数据 。 


表 5-1 不 同 字 体 下 的 line-height :normal 解 析 值 


本 


有 ee Ee 


可 以 看 到 ， 只 要 字体 确定 ， 各 个 浏览 絮 下 的 默认 line-height 


解析 值 基本 上 都 是 一 样 的。 然而 ， 关 键 问题 是 ， 不 同 的 浏览 句 所 使 用 
的 默认 中 英文 字体 并 不 是 一 样 的 ， 并 且 不 同 操作 系统 的 默认 字体 也 不 
一 样 ， 换 句 话 说 ， 就 是 不 同系 统 不 同 浏 贤 妖 的 默认 1ine-height 都 
是 有 差异 的 。 因 此 ， 在 实际 开发 的 时 候 ， 对 line-height 的 默认 值 
进行 重 置 是 势 在 必 行 的 。 下 面 问题 来 了 ，1Line-height 应 该 重 置 为 
多 大 的 值 呢 ?是 使 用 数值 、 百 分 比值 还 是 长 度 值 呢 ? 


要 回答 这 个 问题 ， 我 们 需要 先 对 这 几 种 属性 值 有 一 定 的 了 解 才 


和 ~、 
| 


。 数 值 ， 如 Line-height:1.5， 其 最 终 的 计算 值 是 和 当前 font - 
size 相 乘 后 的 值 。 例 如 ， 假 设 我 们 此 时 的 font -size 大 小 为 
14px， 则 Line-height 计 算 值 是 1.5*14px=21px。 

。 百 分 比值 ， 如 Line-height :150%， 其 最 终 的 计算 值 是 和 当前 
font -size 相 乘 后 的 值 。 例 如 ， 假 设 我 们 此 时 的 font -size 大 
小 为 14px， 则 line-height 计 算 值 是 1506%*14px=21px。 


。 长 度 值 ， 也 就 是 带 单位 的 值 ， 如 1ine-height:21px 或 者 
line-height:1.5em 等 ， 此 处 em 是 一 个 相对 于 font -size 的 
相对 单位 ， 因 此 ，1line-height :1.,5em 最 终 的 计算 值 也 是 和 当 
前 font -size 相 乘 后 的 值 。 例 如 ， 假 设 我 们 此 时 的 font -size 
大 小 为 14px， 则 1Line-height 计 算 值 是 1.5*14px=21px。 


乍 一 看 ， 似 乎 line-height:1.5、1Line-height:150% 和 
1ine-height:1.5em 这 3 种 用 法 是 一 模 一 样 的 ， 最 终 的 行 高 大 小 都 
是 和 font-size 计 算 值 ， 但 是 ， 实 际 上 ，1ine-height:1.5 和 另外 
两 个 有 一 点 儿 不 同 ， 那 就 是 继承 细节 有 所 差别 。 如 果 使 用 数值 作为 
line-height 的 属性 值 ， 那 么 所 有 的 子 元 素 继承 的 都 是 这 个 值 ; 但 
是 ， 如 果 使 用 百分比 值 或 者 长 度 值 作为 属性 值 ， 那 么 所 有 的 子 元 素 继 
承 的 是 最 终 的 计算 值 。 什 么 意思 昵 ? 比方 说 下 面 3 段 CSS 代 码 : 


-Size: 14px; 
-height: 1.5; 


body { 
font-size: 14px; 
line-height: 150%; 


body { 
font-size: 14px; 


line-height: 1.5em; 


J 


对 于 <body> 元 素 而 言 ， 上 面 3 段 CSS 最 终 的 行 高 计算 值 是 21px 是 没有 
任何 区 别 的 ， 但 是 ， 如 果 同 时 还 有 子 元 素 ， 例 如 : 


h3, p { margin: 0; } 
h3 { font-size: 32px; } 
p { font-size: 20px; } 


<h3> 标 题 </h3> 
<p> 内 容 </p> 


结果 line-height:150% 和 1]ine-height:1.5em 的 最 终 表 现 是 “ 标 
题 * 文 字 和 “内 容 * 文 字 重 全 在 了 一 起 ， 如 图 5-13 所 示 。 


俗话 讲 “ 没 有 对 比 就 没有 伤害 ”， 我 们 来 看 看 line-height:1.5 
的 最 终 表 现 ， 排 版 令 人 舒畅 ， 如 图 5-14 所 示 。 


扣 
俩 村 


图 5-13 ”文字 重 县 


标题 
内 容 


图 5-14 ”文字 正常 排版 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-5.php 或 者 扫 右 侧 
的 二 维 码 。 


line-height:150% 和 ]ine-height:1.5em 代 码 下 的 文字 重 
苔 的 原因 在 于 <h3> 和 <p> 元 素 继承 的 并 不 是 150% 或 者 1.5em， 而 是 
<body> 元 素 的 line-height 计 算 值 21px， 也 就 是 说 ，<h3> 和 <p> 
元 素 的 行 高 都 是 21px， 考 虚 到 <h3> 的 font-size 大 小 为 32px， 此 
时 <h3> 的 半 行 间距 就 是 -5.5px， 因 而 “标题 "文字 和 下 面 的 “内 容 ” 文 
字 发 生 重 有 要 。 


但 是 line-height :1.5 的 继承 则 不 同 ，<h3> 和 <p> 元 素 的 
line-height 继 承 的 不 是 计算 值 ， 而 是 属性 值 1.5， 因 此 ， 对 于 
<h3> 元 素 ， 此 时 的 行 高 计算 值 是 1.5*32px=48px，<p> 元 素 的 行 高 
计算 值 是 1.5*20px=30px， 于 是 ， 间 距 合 理 ， 排 版 舒适 。 


实际 上 ，1line-height:150%、line-height:1.5em 要 想 有 
类 似 l1ine-height :1.5 的 继承 效果 ， 也 是 可 以 实现 的 ， 类 似 下 面 的 
CSS 代 码 : 


*{ 
line-height: 150%; 


} | 
忠 古 使 用 通配符 * 匹 配 所 有 的 元 素 。 有 人 可 能 会 疑问 ， 既然 Line- 
height 数 值 可 以 让 元 素 天 然 继承 相对 计算 特性 ， 那 这 里 的 通配符 宫 


不 完全 没 必要 ? 


其 实 非 也 ， 两 者 还 是 有 差别 的 。HTML 中 的 很 多 替换 元 素 ， 尤 其 
表单 类 的 蔡 换 元 素 ， 如 输入 框 、 按 钮 之 类 的 ， 很 多 具有 继承 特性 的 
CSS 属 性 其 自己 也 有 一 套 ， 如 font-family、font-size 以 及 这 里 
的 1ine-height。 由 于 继承 是 属于 最 弱 的 权重 ， 因 此 body 中 设置 的 
1ine-height 是 无 法 影响 到 这 些 替 换 元 素 的 ， 但 是 作为 一 个 选择 
器 ， 就 不 一 样 了 ， 会 直接 重 置 这 些 替 换 元 素 默 认 的 line-height， 
这 其 实 是 我 们 需要 的 ， 因 此 从 道义 上 讲 ， 使 用 通 配 也 是 合理 的 。 但 又 
考 虚 到 * 的 性 能 以 及 明明 有 继承 却 不 好 好 利用 的 羞耻 感 ， 我 们 可 以 折 
中 使 用 下 面 的 方法 : 


body { 
line-height: 1.5; 


} 
input, button { 
line-height: inherit; 


说 这 么 多 其 实 还 是 为 了 解决 一 开始 的 问题 : Line-height 应 该 
重 置 为 多 大 的 值 呢 ? 十 使 用 数值 、 百 分 比值 还 是 长 度 值 呢 ? 


下 面 是 我 的 答案 : 如 果 我 们 做 的 是 一 个 重 图 文 内 容 展示 的 网 页 或 
者 网 站 ， 如 博客 、 论 坛 、 公 众 号 之 类 的 ， 那 一 定 要 使 用 数值 作为 单 
位 ， 考 虑 到 文章 阅读 的 舒适 度 ，Line-height 值 可 以 设置 在 1.6 一 


1.8。 如 有 果 是 一 个 偏重 布局 结构 精致 的 网 站 ， 则 在 我 看 来 使 用 长 度 值 或 
者 数值 都 是 可 以 的 ， 因 为 ， 第 一 ， 我 们 的 目的 是 为 了 兼容 ; 第 二 ， 无 
论 使 用 哪 种 类 型 值 ， 都 存在 需要 局 部 重 置 的 场景 。 不 过 ， 根 据 我 的 统 
计 ， 基 本 上 各 大 站 点 都 是 使 用 数值 作为 全 局 的 1ine-height 值 。 不 
过 ， 这 并 不 表示 使 用 数值 束 一 定 是 最 好 的 ， 如 琳 网 站 内 容 的 样式 不 是 
动态 不 可 控 的 ， 有 时 候 ， 固 定 的 长 度 值 反 而 更 利于 精确 布局 。 因 此 ， 
不 要 盲目 跟风 。 那 具体 设置 的 值 应 该 是 多 大 呢 ? 


如 果 使 用 的 是 长 度 值 ， 我 建议 直接 line-height:20px， 排 版 
时 候 计 算 很 方便 。 


如 采 随 大 流 使 用 的 是 数值 ， 我 建议 最 好 使 用 方便 计算 的 行 高 值 ， 
一 种 是 Line-height 属 性 值 本 寻 方 便 计 算 ， 另 一 种 是 line-height 
的 默认 计算 值 方便 计算 。 比 方 说 ，1.3、1.4、1.5 都 有 大 型 网 站 使 用 ， 
我 们 就 不 妨 使 用 1,5， 因 为 心算 1,4*16px 要 比 1,5*16px 难 多 了 ， 这 
束 古 第 一 种 “属性 值 本 号 方 便 计算 ”， 而 男 外 一 种 “默认 计算 值 方便 计 
算 ” 是 我 们 先 得 到 方便 计算 的 line-height 计 算 值 ， 然 后 倒 推 1ine- 
height 应 该 使 用 的 数值 是 多 大 ， 例 如 20px 是 一 个 非常 方便 的 计算 
值 ， 如 果 <body> 默 认 重 置 的 font -size 是 14px， 则 1Line-height 
数值 应 该 是 20px/14px=1.4285714285714286 四 爸 五 入 的 结果 ， 
于 是 得 到 : 


body { 
line-height: 1.42857; 
font-size: 14px; 


} 


不 好 意思 ， 给 大 家 下 套子 了 。 注 意 ， 在 CSS 中 ， 计 算 行 高 的 时 
候 ， 行 高 值 一 定 不 要 向 下 舍 入 ， 而 要 向 上 舍 入 。 上 面 虽然 
14*1.42857 计 算 机 近乎 是 20px， 但 在 Chrome 浏 览 器 下 ， 依 然 以 
19px 的 高 度 呈 现 ， 如 果 我 们 向 上 舍 入 取 1.42858， 则 最 终 所 有 浏览 絮 
行 高 计算 值 是 20px， 代 码 示意 如 下 : 


body { 
line-height: 1.42858; 
font-size: 14px; 


} 


5.2.4 ”内 联 元 素 line-height 的 “大 值 特性 ” 


理解 了 下 面 这 个 案例 ， 就 真正 理解 了 内 联 元 素 1ine-height 。 
因此 ， 放 在 最 后 算是 对 Line-height 的 总 结 和 知识 测验 吧 。 此 例子 
HTML 都 是 一 样 的 : 


<div class="box"> 
<span> 内 容 .. .</span> 
</div> 


CSS 代 码 有 所 不 同 ， 分 别 为 


.box { 
line-height: 96px; 


.box Span { 


line-height: 20px; 
} 


和 


.box { 
line-height: 20px; 
} 


.box Span { 
line-height: 96px; 
} 


也 就 是 一 个 子 元 素 行 高 是 20px， 一 个 是 96px， 假 如 文字 就 1 


行 ，.box 元 素 的 高 度 分 别 是 多 少 ? 


按照 我 们 以 前 考试 做 选择 题 的 套路 ， 非 A 即 B: 按照 经 验 ， 子 元 素 
行 高 覆盖 父 元 素 ， 应 该 高 度 等 于 <span> 元 素 的 高 度 ， 分 别 是 20pXx、 
96px; 但 由 于 基本 功 不 够 扎实 ， 并 不 确定 内 联 元 素 是 否 文 持 line- 
height， 如 果 不 文 持 ， 那 应 该 跟着 , box 元素 的 行 高 走 ， 高 度 应 该 是 
96px、20px。 总 之 ， 肯 定 加 这 两 个 答案 之 间 ! 


好 ， 如 果 大 家 也 有 和 上 面 类 似 的 想法 ， 那 么 建议 还 要 再 细 细 读 一 
读 前 面 的 内 容 。 正 确 的 答案 是 : 全 都 是 96px 癌 ! 


还 不 信 ? 可 以 看 一 下 演示 示例 ， 手 动 输入 
http:/demo.cssworld.cn/5/2-6.php 或 者 扫 下 面 的 二 维 码 。 殖 果 如 图 5-15 
所 示 ( 截 自 正 浏览 右 ) 


span: line-height:20px 


span: line-height:96px 


图 5-15 ” .box 元 素 的 高 度 均 是 96px 


也 就 是 说 : 无 论 内 联 元 素 1ine-height 如 何 设置 ， 最 终 父 级 元 
素 的 高 度 都 是 由 数值 大 的 那个 Line -height 决 定 的 ， 我 称 之 为 “内 联 
元 素 1ine-height 的 大 值 特 性 ”。 


可 能 很 多 人 会 有 疑问 : 为 什么 会 这 样 ? 逻辑 上 讲 不 通 啊 ? 


首先 ， 要 明确 一 点 : 内 联 元 素 是 支持 line-height 的 <span> 元 
素 上 的 line-height 也 确实 覆盖 了 .box 元 素 ， 但 是 ， 在 内 联 盒 模型 


中 ， 存 在 一 些 你 看 不 到 的 东西 ， 没 错 ， 就 是 多 次 提 到 的 “幽灵 空 日 入 
局 ”5 


正好 再 次 (也 是 最 后 一 次 ) 温习 一 下 “内 联 盒 模 型 * 的 知识 。 这 里 
的 <span> 是 一 个 内 联 元 素 ， 因 此 目 身 古 一 个 “内 联 盒 子 ”， 本 例 就 这 一 
个 “内 联 盒子 ”， 只 要 有 “内 联 盒子 ”在 ， 束 一 定 会 有 “ 行 框 盒子”， 就 是 
每 一 行内 联 元 聚 外 面包 囊 的 一 层 看 不 见 的 合子。 然后， 重点 来 了 ， 在 
每 个 “ 行 框 盒 子 " 前 面 有 一 个 宽度 为 6 的 具有 该 元 素 的 字体 和 行 高 属性 的 


看 不 见 的 “幽灵 空白 节点 ”>， 如 果 套 用 本 案 ， 则 这 个 “幽灵 空白 节点 ”就 
在 <span> 元 素 的 前 方 ， 如 图 5-16 所 示 。 


“strut” 


div class="box"> 
|<span> 内 容 . . .</span> 
</div> 


图 5-16 “幽灵 空白 节点 ” 《又 名 “strut”) 标注 


于 是 ， 束 效果 而 言 ， 我 们 的 HTML 实 际 上 等 同 于 : 


<div class="box"> 


dr 


字符 <span> 内 容 .. .</span> 


</div> 


C6 


这 下 就 好 理解 了 ， 当 .box 元 素 设置 line-height:96px 时 ,“ 字 
符 ” 高 度 96px; 当 设 置 1ine-height:20px 时 ，<span> 元 素 的 高 度 
则 变 成 了 96px， 而 行 框 盒子 的 高 度 是 由 高 度 最 高 的 那个 “内 联 盒子 ” 决 
定 的 ， 这 了 就 是 ,box 元 素 高 度 永远 都 症 最 大 的 那个 line-height 的 原 


知道 了 原因 也 就 能 够 对 症 下 药 ， 要 避免 “幽灵 空 昌 市 点 ”的 干扰 ， 
例如 ,设置 <span> 元 素 display:inline-block， 创建 一 个 独立 
的 “ 行 框 盒子 ”， 这 样 <span> 元 素 设 置 的 J]ine-height :20px 束 可 以 
生效 了 ， 这 也 是 多 行文 字 垂直 居中 示例 中 这 么 设置 的 原因 。 


5.3 1ine-height 的 好 朋友 vertical- 
align 


终于 轮 到 1ine-height 的 好 朋友 vertical-align 上 场 了 ,为 
什么 说 它们 是 好 朋友 呢 ? 因 为 几 是 line-height 起 作用 的 地 方 
vertical-align 也 一 定 起 作用 ， 只 是 很 多 时 候 ，vertical- 
align 默 默 地 在 背后 起 作用 ， 你 没有 感觉 到 而 已 。 


很 多 人 都 有 这 样 一 个 错误 的 认 知 ， 认 为 对 于 单行 文本 ， 只 要 行 高 
设置 多 少 ， 其 占据 高 度 就 是 多 少 。 比 方 说 ， 对 于 下 面 非 常人 简单 的 CSS 
和 HTML 代 码 : 


‘box { line-height: 32px; } 
‘box > span { font-size: 24px; } 
<div class="box"> 


<span> 文 字 </span> 
</div> 


. box 元 素 的 高 度 是 多 少 ? 


很 多 人 一 定 认 为 是 32px: 因为 没有 设置 height 等 属性 ， 高 度 就 
由 1line-height 决 定 ， 与 font-size 无 关 ， 所 以 这 里 明 提 着 最 终 高 
度 就 是 32pXx。 


但 是 事实 上 ， 高 度 并 不 是 32px， 而 是 要 大 那么 几 像素 〈 受 不 同 
字体 影响 ， 增 加 高 度 也 不 一 样 ) ， 比 方 说 36px， 如 图 5-17 所 示 。 图 5- 
17 截 目 此 示例 页 面 : http:/demo.cssworld.cn/5/3-1.php。 


文本 


图 5-17 单行 文本 容器 高 度 不 等 于 行 高 


这 里 ， 之 所 以 最 终 .box 元素 的 高 度 并 不 等 于 line-height， 避 ¥ 
是 因为 行 高 的 朋友 属性 vertical-align 在 背后 默默 地 下 了 黑手 。 


vertical-align 知 识 点 比 line-height 要 多 ， 我 们 现在 就 来 
一 点 一 点 地 揭 开 vertical-align 属 性 的 层 层面 纱 。 


5.3.1 vertical-align 家 族 基 本 认识 


抛 开 inherit 这 类 全 局 属性 值 不 谈 ， 我 把 vertical-align 属 
性 值 分 为 以 下 4 类 : 


。 线 类 ， 如 baseline (默认 值 ) 、top、middle、bottom; 
。 文 本 类 ， 如 text-top、text-bottonm; 

。 上 标 下 标 类 ， 如 sub、super:; 

。 数值 百分比 类 ， 如 20px、2em、20% 等 。 


实际 上 ,“ 数 值 百 分 比 类 ”应 该 是 两 类 ， 分 别 是 "数值 类 ”和 “百分比 
类 ”， 这 里 之 所 以 把 它们 合 在 一 起 归 为 一 类 ， 是 因为 它们 有 不 少 共性 ， 
包括 “都 市 数字 ”和 “行为 表现 一 致 "”。 


“都 带 数 字 ” 略 珊 戏 让 之 意 ， 没 什么 好 说 的 。“ 行 为 表现 一 致 "表示 
具有 相同 的 演 染 规则 ， 有 具体 为 : 根据 计算 值 的 不 同 ， 相 对 于 基线 往 上 
或 往 下 偏 移 ， 到 底 是 往 上 还 是 往 下 取决 于 vertical- align 的 计算 


值 古 正 值 还 古人 负 值 ， 如 果 是 负 值 ， 往 下 仿 移 ， 如 琳 十 正 值 ， 往 上 偏 
移 。 


为 了 更 好 地 演示 vertical-align 数 值 类 属性 值 的 表现 ， 我 特意 
做 了 个 演示 页 面 ， 手 动 输入 http:/demo.cssworld.cn/5/3-2.php 或 者 扫 右 
侧 的 二 维 码 。 


由 于 vertical-align 的 默认 值 是 paseline， 即 基线 对 齐 ， 而 
基线 的 定义 是 字母 x 的 下 边缘 。 因 此 ， 内 联 元 素 默认 都 是 沿 着 字母 x 的 
下 边缘 对 齐 的 。 对 于 图 片 等 替换 元 素 ， 往 往 使 用 元 素 本 吴 的 下 边缘 作 
为 基线 ， 因 此 ， 进 入 上 面 的 演示 页 面 ， 看 到 的 是 图 5-18 所 示 的 图 文 排 
列 效 果 。 


由 于 是 相对 字母 x 的 下 边缘 对 齐 ， 而 中 文 和 部 分 英文 字形 的 下 边缘 
要 低 于 字母 x 的 下 边缘 ， 因 此 ， 会 给 人 感觉 文字 十 明显 仿 下 的 ， 一 般 都 
会 进行 调整 。 比 方 说 ， 我 们 给 文字 内 容 设置 vertical- 


align:10px， 则 文字 内 容 就 会 在 当前 基线 位 置 再 往 上 精确 偏 移 
10pXx， 殖 果 如 图 5-19 所 示 。 


母 X 


图 5-18 ”默认 的 图 文 对 齐 表现 


母 x 


文字 的 vertical-align 值 : ] l0px  " 


图 5-19 vertical-align:10px 偏 移 后 的 效果 


演示 页 面 还 提供 了 很 多 其 他 可 供 选 择 的 vertical-align 值 ， 经 
一 番 试 验 读 者 就 会 发 现 ， 正 如 上 面 所 说 ， 负 值 全 部 都 是 往 下 偏 移 ， 
正 值 全 部 都 是 往 上 偏 移 ， 而 且 数值 大 小 全 部 都 是 相对 于 基线 位 置 计算 
的 ， 因 此 ， 从 这 一 点 来 看 ，vertical-align:baseline 等 同 于 
vertical-align:0° 


说 到 这 里 ， 我 就 忍 不 住 多 说 两 句 。 很 多 即使 工作 很 多 年 的 前 端 开 
发 人 员 ， 也 可 能 不 知道 vertical-align 的 属性 值 支持 数值 ， 更 不 知 
道 文 持 负 值 ， 这 着实 让 我 很 意外 。 如 果实 用 性 差 那 还 好 理解 ， 关 键 是 
vertical-align 的 数值 属性 值 在 实际 开发 的 时 候 实 用 性 非常 强 。 


一 是 其 兼容 性 非常 好 。 在 之 前 ，vertical-align 属 性 的 兼容 性 
被 开发 人 员 诉 病 已 久 ， 因 为 需要 兼容 耻 6 和 IE7 浏 览 器 ， 而 这 些 浏 览 器 
的 vertical-align 关 键 字 属性 值 (如 middle、text-top 等 ) 的 
泻 染 规 则 和 其 他 浏 充 硕大 相 径 许 ， 很 多 人 不 知道 vertical-align 还 
可 以 使 用 数值 作为 属性 值 ， 结 果 CSS hack 满 天 飞 。 实 际 上 ， 
vertical-align 有 一 些 属性 值 的 渲染 一 直 都 很 兼容 ， 一 个 是 默认 的 
基线 对 齐 ， 男 一 个 就 是 相对 于 基线 的 “数值 百分比 类 ”属性 值 偏 移 定 
位 。 也 就 是 说 ， 如 果 我 们 使 用 类 似 vertical-align:10px 这 样 的 定 
位 ， 是 不 会 有 任何 兼容 性 问题 的 ， 也 不 需要 写 CSS hack。 


二 是 其 可 以 精确 控制 内 联 元 素 的 垂直 对 齐 位 置 。vertical- 
align 属 性 的 规范 和 统一 从 IE8 浏 览 絮 开始， 由 于 我 们 现在 都 不 需要 兼 
容 IE8 以 前 的 浏览 器 ，middle、text-top 等 关键 字 属性 值 可 以 畅快 
使 用 ， 但 是 这 些 关 键 字 有 一 个 严重 的 不 足 ， 就 是 垂直 对 齐 位 置 是 固定 
的 ， 往 往 最 后 并 不 是 我 们 想 要 的 像素 级 精确 对 齐 效 有 果 ， 此 时 ， 还 是 需 
要 借助 “数值 百分比 类 ”属性 值 才 可 以 。 


我 们 不 妨 看 一 个 位 单 的 小 图 标 对 齐 的 例子 。 


假设 有 一 个 display 值 为 jnline-block 的 尺寸 为 20 像 素 x20 像 
素 的 小 图 标 ， 默 认 状 态 下 ， 文 字 是 明显 偏 下 的 ， 类 似 图 5-20 中 “请 选 
择 ” 三 个 字 和 后 面 三 角 图 形 的 位 置 关 系 。 


这 里 ， 我 们 需要 的 是 垂直 居中 对 齐 效果 ， 所 以 很 多 人 都 使 用 具有 
强烈 语义 的 vertical- align:middle 控 制图 标的 垂直 位 置 ， 然 
而 ， 由 于 middle 并 不 是 真正 意义 上 的 垂直 居中 ， 因 此 还 是 会 有 像素 


级 别 的 误差 ， 误 差 大 小 与 字体 和 字号 均 有 关 。 例 如， 在 本 例 中 ， 图 标 
主 下 多 偏 移 了 1 像素 而 导致 容器 的 可 视 局 度 变 成 了 21 像 素 ， 如 图 5-21 所 


dl 一 人 下 


请 选择 


图 5-20 ”文字 位 置 比 图 标 低 


请 选择 :x 


图 5-21 middle 属 ' 


HF 


生 导 致 过 多 偏 移 从 而 使 容器 尺寸 超出 预期 


但 是 ， 如 果 我 们 使 用 精确 的 数值 ， 则 一 切 尽 在 掌控 之 中 。 例 如 ， 
设置 vertical-align: -5px， 此 时 ， 图 标 和 文字 实现 了 真正 意义 
上 的 垂直 居中 ， 此 时 容 右 的 可 视 高 度 和 当前 行 高 20 像 素 保 持 了 一 致 ， 
如 图 5-22 所 示 。 眼 见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/5/3-3.php 
或 者 扫 下 面 的 二 维 码 。 


请 选择 


图 5-22”-5px 实 现 的 完美 的 垂直 居中 


说 完 “ 数 值 类 ”和 “百分比 类 ”属性 值 的 行为 表现 ， 下 面 再 简单 说 说 
平时 使 用 并 不 多 的 “百分比 类 ”属性 值 。 


在 CSS 世 界 中 ， 凡 是 百分比 值 ， 均 是 需要 一 个 相对 计算 的 值 ， 例 
如 ，margin 和 padding 是 相对 于 宽度 计算 的 ，Line-height 是 相对 
于 font -Size 计算 的 ， 而 这 里 的 vertical- align 属 性 的 百分比 值 
则 是 相对 于 ]ine-height 的 计算 值 计算 的 。 可 见 ，CSS 世 界 中 的 各 类 
属性 相互 间 有 着 紧密 联系 而 非 孤 立 的 个 体 。 


假设 某 元 素 的 Line-height 是 20px， 那么 此 时 vertical- 
align:-25% 相 当 于 设置 vertical-align:-5px。 按 照 之 前 学 到 的 
知识 ， 会 发 现 百分比 值 无 论 什 么 时 候 都 很 实用 ， 因 此 会 给 人 感觉 
vertical-align 的 百分比 属性 值 也 会 非常 实用 ， 但 是 事实 上 ， 平 时 
开发 中 很 少 使 用 。 原 因 在 于 ， 在 如 今 的 网 页 布局 中 ，1lLine-height 
的 计算 值 都 是 相对 固定 并 且 已 知 的 ， 因 此 ， 直 接 使 用 具体 的 数值 反而 
更 方便 。 比 方 说 上 面 小 图 标 对 齐 的 例子 ， 我 们 肯定 会 直接 vertical- 
align:-5px， 而 不 会 使 用 vertical-align: -25%， 因 为 后 者 还 要 
重 狐 计算 ， 并 且 很 多 时 候 是 除 不 尽 的 ， 除 了 装 门面 以 外 ， 我 是 想不到 
还 有 其 他 使 用 的 理由 了 。 


这 束 古 为 什么 “百分比 类 ”属性 值 “ 简 单 说 说 ”的 原因 了 。 


5.3.2 vertical-align 作 用 的 前 提 


很 多 人 ， 尤 其 CSS 新 手 ， 会 问 这 么 一 个 问题 “为 什么 我 设置 了 
vertical-align 却 没 任何 作用 ? ” 


因为 vertical-align 起 作用 是 有 前 提 条 件 的 ， 这 个 前 提 条 件 就 
是 : 只 能 应 用 于 内 联 元 素 以 及 display 值 为 table-cell 的 元 素 。 


换 句 话说 ，vertical-align 属 性 只 能 作用 在 dijsplay 计 算 值 
为 jnline、inline- block，inline-table 或 table-cell 的 
元 素 上 。 因 此 ， 上 默认 情况 下 ，<span>、< strong>、<em> 等 内 联 元 
素 ，<img>、<button>、<input> 等 替换 元 素 ， 非 HTML 规范 的 自 
定义 标签 元 素 ， 以 及 <td> 单 元 格 ， 都 是 支持 vertical-align 属 性 
的 ， 其 他 块 级 元 素 则 不 支持 。 


当然 ， 现 实 世界 是 没有 这 么 简单 的 。CSS 世 界 中 ， 有 一 些 CSS 属 
性 值 会 在 背后 默默 地 改变 元 素 display 属 性 的 计算 值 ， 从 而 导致 
vertical-align 不 起 作用 。 比 方 说 ， 浮 动 和 绝对 定位 会 让 元 素 块 状 
人 化， 因此， 下 面 的 代码 组 合 vertical-align 是 没有 理由 出 现 的 : 


.example { 
float: Left， 
vertical-align: middle; /* 没有 作用 


.example { 
position: absolute,; 
vertical-align: middle; /* 没有 作用 


等 等 ， 我 好 像 听 到 有 人 说 :“ 不 是 vertical-align 没 有 作用 ， 
而 是 下 面 这 种 情况 。” 


.box { 
height: 128px; 


‘box > img { 
height: 96px; 


vertical-align: middle; 


<div class="box"> 
<img src="1.jpg"> 
</div> 


此 时 图 片 顶 着 .box 元素 的 上 边缘 显示 ， 根 本 没 垂直 居中 ， 完 全 没 起 作 
用 ! 


这 种 情况 看 上 去 是 vertical-align:middle 没 起 作用 ， 实 际 
上 , vertical-align 是 在 努力 地 泻 染 的 ， 只 是 行 框 盒子 前 面 的 < 幽 
本 
伙 


灵 衬 白 节 点 "高度 太 小 ， 如 果 我 们 通过 设置 一 个 足够 大 的 行 高 让 “幽灵 
空白 节点 ”高 度 足够 ， 就 会 看 到 vertical-align:middle 起 作用 


了 ，CSS 代 码 如 下 : 


height: 128px; 
line-height:; 128px;  /* 关键 CSS 属 性 


‘box > img { 
height: 96px; 
vertical-align: middle; 


等 等 ， 我 又 听 到 有 人 说 :“ 为 什么 display :table-cell 却 可 以 
无 视 行 高 ? ” 


告诉 你 ， 那 是 因为 对 table-cell 元 素 而 言 ，vertical-align 
起 作用 的 是 table-cell 元 素 目 和 映 。 不 妨 看 下 面 一 段 代 码 : 
.Cell { 


height: 128px; 
display: table-cell; 


} 
.Cell > img { 


height: 96px; 
vertical-align: middle; 


<div class="cell"> 
<img src="1.jpg"> 
</div> 


结果 图 片 并 没有 要 垂直 居中 的 迹象 ， 还 是 紧 贴 着 父 元 素 的 上 边 
缘 ， 如 图 5-23 所 示 。 


但 是 ， 如 果 vertical-align:middle 是 设置 在 table-cell 
元 素 上 ，CSS 代 码 如 下 : 


.Cell { 
height: 128px; 
display: table-cell; 
vertical-align: middle; 


} 
.Cell > img { 
height: 96px; 


那么 图 片 就 有 了 明显 的 变化 ， 如 图 5-24 所 示 。 


图 5-23 ”图 片 的 vertical-align:middle 没 有 效果 


日 


图 5-24 table -cel1 元 素 vertical-align:middle 有 效 细 


所 以 ， 大 家 一 定 要 明确 ， 虽 然 束 效 采 而 言 ，table-c 


长 


el11 元 素 设 


置 vertical-align 垂 直 对 齐 的 是 子 元 隶 ， 但 是 其 作用 的 并 不 是 子 元 


素 ， 而 是 table-cell 元 素 自 身 。 就 算 table-cell 元 素 的 子 元 素 是 


一 个 块 级 元 素 ， 也 一 样 可 以 让 其 有 各 种 垂直 对 齐 表现 。 


table-cel11 垂 直 对 齐 有 对 应 的 演示 页 面 ， 手 动 输入 
http://demo.cssworld.cn/ 5/3-4.php 或 者 扫 右 侧 的 二 维 码 。 


5.3.3 vertical-align 和 ]ine-height 之 间 的 关系 


vertical-align 和 1lLine-height 之 间 的 关系 很 明确 ， 即 * 朋 


最 明显 的 就 是 vertical-align 的 百分比 值 是 相对 于 line- 
height 计 算 的 ， 但 表面 所 见 的 这 点 关系 实际 是 只 是 冰山 一 角 ， 实 际 
是 只 要 出 现 内 联 元 素 ， 这 对 好 朋友 一 定 会 同时 出 现 。 


还 记 不 记得 一 开始 容器 高 度 不 等 于 行 高 的 例子 
(http://demo.cssworld.cn/5/3-1.php) ? 这 就 是 这 对 好 朋友 摘 的 时 。 这 
里 要 为 大 家 深入 讲解 一 下 为 什么 会 出 现 这 样 的 现象 。 首先 ， 我 们 仔细 
看 一 下 相关 的 代码 : 
.box { line-height: 32px; } 


,box > span { font-size: 24px; } 
<div class="box"> 


<span> 文 字 </span> 
</div> 


其 中 有 一 个 很 关键 的 点 ， 那 就 是 24px 的 font -size 大 小 是 设置 在 
<span> 元 素 上 的 ， 这 束 导 任 了 外 部 <div> 元 素 的 字体 大 小 和 <span> 
元 素 有 较 大 出 入 。 


大 家 一 定 还 记得 图 5-16。 这 里 也 是 类 似 的 ，<span> 标 签 前 面 实际 
上 有 一 个 看 不 见 的 类 似 字符 的 “幽灵 空 日 节操 *”。 看 不 见 的 东西 不 利于 
理解 ， 因 此 我 们 不 妨 使 用 一 个 看 得 见 的 字符 x 占 位 ， 同 时 “文字 ”后 面 也 
添加 一 个 x， 便 于 看 出 基线 位 置 ， 于 是 束 有 如 下 HTML: 


<div class="box"> 
x<span> 文 字 x</span> 
</div> 


此 时 ， 我 们 可 以 明显 看 到 两 处 大 小 完全 不 同 的 文字 。 一 处 是 字母 x 
构成 了 一 个 “匿名 内 联 盒子 ”， 另 一 处 是 “文字 x” 所 在 的 <span> 元 素 ， 
构成 了 一 个 “内 联 盒子 *。 由 于 都 受 line- _ height:32px 影 响 ， 
此 ， 这 两 个 “内 联 盒子 ”的 高 度 都 是 32px。 下 面 关 键 的 来 了 ， 对 字符 而 
言 ，font-size 越 大 字符 的 基线 位 置 越 往 下 ， 因 为 文字 默认 全 部 都 是 
基线 对 齐 ， 所 以 当 字 号 大 小 不 一 样 的 两 个 文字 在 一 起 的 时 候 ， 彼 此 就 
会 发 生 上 下 位 移 ， 如 果 位 移 距 离 足够 大 ， 就 会 超过 行 高 的 限制 ， 而 导 
致 出 现 意 料 之 外 的 高 度 ， 如 图 5-25 所 示 。 


‘Be sit, 上 Ff I! ,:. x 文本 X 


庶 伐 春 示 基 公 住 置 


图 5-25 ”不 同 字 号 文字 高 度 超出 行 高 示意 


图 5-25 非 常 直 观 地 说 明了 为 何 最 后 容 句 的 高 度 会 是 36px， 而 非 
line-height 设 置 的 32px。 


知道 了 问题 发 生 的 原因 ， 那 问题 束 很 好 解决 了 。 我 们 可 以 让 “幽灵 
空 日 让 友 ” 和 后 面 <span> 元 素 字 写 一 样 大 ， 也 就 是 : 


.box { 
line-height: 32px; 


font-size: 24px; 


,box > Span { } 


或 者 改变 垂直 对 齐 方式 ， 如 顶部 对 齐 ， 这 样 就 不 会 有 参差 位 移 了 : 


,box { line-height: 32px; } 
,box > span { 
font-size: 24px; 


vertical-align: top; 
} 


搞 清楚 了 大 小 字号 文字 的 高 度 问 题 ， 对 更 为 常见 的 图 片 抵 部 留 有 
间 隐 的 问题 的 理解 就 容易 多 了 “。 现 象 是 这 样 的: 任意 一 个 块 级 元 素 ， 
里 面 奉 有 图 片 ， 则 块 级 元 素 高 度 基本 上 都 要 比 独 片 的 高 度 高 。 例 如 : 


,box { 
width: 280px; 
outline: 1px solid #aaa 
text-align: center; 


,box > img { 


height: 96px; 


<div class="box"> 
<img src="1.jpg"> 
</div> 


结果 .box 元素 的 噩 度 可 能 束 会 像 图 5-26 一 样 ， 故 部 平日 无 故 多 了 5 像 
素 。 


间 队 产生 的 三 大 元 凶残 是 “幽灵 空 日 节点 ”、1Line-height 和 
vertical-align 属 性 。 为 了 直观 演示 原理 ， 我 们 可 以 在 图 厂 前 面 辅 
助 一 个 字符 xx 代替“ 幽灵 衬 晶 节点 ">， 并 想 办 法 通过 背景 色 显 示 其 行 高 范 
围 ， 于 是 ， 大 家 就 会 看 到 如 图 5-27 所 示 的 现象 。 


人 


图 5-26 ”图 片 底部 间 际 示意 


图 5-27 ”图片 间 阳 原理 示意 


当前 1ine-height 计 算 值 是 20px， 而 font -Size 只 有 14px， 
因此 ， 字 母 x 往 下 一 定 有 至 少 3px 的 半 行 间距 (具体 大 小 与 字体 有 
关 ) ， 而 图 片 作为 替换 元 素 其 基线 是 自身 的 下 边缘 。 根 据 定 义 ， 默 认 
和 基线 (也 就 是 这 里 字母 x 的 下 边缘 ) 对 齐 ， 字 母 x 往 下 的 行 高 产生 的 
多 余 的 间 阶 束 嫁 祸 到 图 片 下 面 ， 让 人 以 为 是 图 片 产生 的 间隙 ， 实 际 
上 ， 是 “幽灵 空 日 太 点 *”、line-height 和 vertical-align 属 性 共 
同 作用 的 结果。 


知道 了 原理 ， 要 清除 该 则 际 ， 就 知道 如 何 对 症 下 药 了 。 方 法 很 
多 ,具体 如 下 。 


(1) 图 片 块 状 化 。 可 以 一 口气 干掉 “幽灵 空白 节点 >”、1ine- 
height 和 vertical-align。 


(2) 容器 lijne-height 足 够 小 。 只 要 半 行 间距 小 到 字母 x 的 下 
边缘 位 置 或 者 再 往 上 ， 上 自然 就 没有 了 撑 开 的 部 间 际 高 度 空间 了 。 比 方 
说 ， 容 器 设置 Line-height:0。 


(3) 容器 font -size 足 够 小 。 此 方法 要 想 生 效 ， 需 要 容器 的 
line-height 属 性 值 和 当前 font -Size 相关 ， 如 Line- 


height:1.5 或 者 Line-height:150% 之 类 ; 否则 只 会 让 下 面 的 间 
隙 变 得 更 大 ， 因 为 基线 位 置 因 字符 x 变 小 而 往 上 升 了 。 


(4) 图 片 设置 其 他 vertical-align 属 性 值 。 间 除 的 产生 原因 
之 一 就 是 基线 对 齐 ， 所 以 我 们 设置 vertical-align 的 值 为 top、 
middle、bottom 中 的 任意 一 个 都 是 可 以 的 。 


以 上 所 有 方法 在 演示 页 面 中 均 有 对 应 的 效果 展示 ， 手 动 输入 http:// 
demo.cssworld.cn/5/3-5.php 或 者 扫 右 侧 的 二 维 码 。 


在 4.3.5 节 最 后 提 人 到 了 一 个 “内 联 特 性 导致 的 margin 无 效 ” 的 案例 ， 
代码 如 下 : 


<div class="box"> 
<img src="mm1.jpg"> 

</div> 

.box > img { 


height: 96px; 
margin-top: -200px; 


此 时 ， 按 照 理解 ，-200px 远 远 超 过 图 片 的 高 度 ， 图 片 应 该 完全 
跑 到 容 絮 的 外 面 ， 但 是 ， 图 片 依然 有 部 分 在 .box 元 素 中 ， 而 且 就 算 
margin-top 设 置 成 -99999px， 图 片 也 不 会 继续 往 上 移动 ， 完 全 失 
效 。 其 原理 和 上 面 图 片 底部 留 有 间 际 实际 上 是 一 样 的 ， 图 片 的 前 面 有 
个 “幽灵 空白 节点 ”>， 而 在 CSS 世 界 中 ， 非 主动 触发 位 移 的 内 联 元 素 是 
不 可 能 跑 到 计算 容器 外 面 的 ， 导 致 图 片 的 位 置 被 < 幽灵 空白 节点 ”的 
vertical-align:baseline 给 限 死 了 。 我 们 不 妨 把 看 不 见 的 “幽灵 
空白 节点 ”使 用 字符 x 人 代替， 原因 就 一 目 了 然 了 ， 如 图 5-28 所 示 。 
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图 5-28 vertical-align 导 致 margin 负 值 无 效 


因为 字符 x 下 边缘 和 图 片 下 边缘 对 齐 ， 了 字符 x 非 主动 定位， 不 可 能 
跑 到 容器 外 面 ， 所 以 图 片 就 被 限 死 在 此 问题 margin-top 失 效 。 


最 后 ， 我 们 再 看 一 个 更 为 复杂 的 示例 。text-align:jusitfy 
声明 可 以 帮助 我 们 实现 兼容 的 列表 两 端 对 齐 效果 ， 但 是 text- 
align:jusitfy 两 端 对 齐 需 要 内 容 超 过 一 行 ， 同 时 为 了 让 任意 个 数 
的 列表 最 后 一 行 也 是 左 对 齐 排列 ， 我 们 需要 在 列表 最 后 辅助 和 列表 宽 
度 一 样 的 空 标签 元 素来 占 位 ， 类 似 下 面 HTML 代 码 的 <i> 标 签 : 


.box { 
text-align: justify; 


,Justify-fix { 
display: inline-block; 


width: 96px; 


<div class="box"> 
<img src="1.jpg" width="96"> 
<img src="1.jpg" width="96"> 
<img src="1.jpg" width="96"> 
<img src="1.jpg" width="96"> 
<i class="justify-fix"></i> 
<i class="justify-fix"></i> 
<i class="justify-fix"></i> 

</div> 


空 的 jnline-block 元 素 的 高 度 是 90， 按照 通常 的 理解 ， 下 面 应 
该 是 一 马 平川 ， 结 果 却 有 非常 大 的 空 际 存在 ， 如 图 5-29 所 示 。 


为 了 便于 大 家 看 个 守 竟 ， 我 把 占 位 <Ii> 元 素 的 out1Line 属 性 用 虚 
外 框 标示 一 下 ， 此 时 效果 如 图 5-30 所 示 。 


结果 发 现 ， 上 面 巨大 的 空 除 是 由 占 位 <i> 元 素 上 面 和 下 面 的 间 聊 
共同 组 成 的 。 


于 是 ， 问 题 来 了 : 上面 的 间 隐 是 如 何 产 生 的 ? 下 面 的 间 隐 站 如 何 
产生 的 ? 如 果 去 除 这 些 间 际 呢 ? 


很 多 时 候 ， 复 杂 问 题 是 由 简单 问题 组 合 而 成 的 。 实 际 上 ， 这 里 的 
间隙 现象 和 上 面 的 图 片 间 际 现象 本 质 一 样 ， 都 是 vertical-align 和 
line-height 共 同 作 用 的 结果 。 


在 大 办 加 阶 


i 


图 5-29 列表 下 面 留 有 巨大 的 间 阶 


图 5-30” 占 位 的 <i> 元 素 位 置 示意 


按照 之 前 解决 问题 的 方法 ， 我 们 可 以 直接 给 .box 元 素来 个 line- 
height :9 解决 垂直 间 隐 问题， 结果 ， 这 样 设置 之 后 的 效果 却 如 图 5- 
31 所 示 。 疼 片 和 图 片 之 间 的 间 隐 是 没有 了 ， 但 是 图 片 和 节 后 的 占 位 元 
素 之 间 依然 有 几 像 素 的 间距 ， 真 有 些 让 人 抓 狂 了 “。 这 究竟 旦 为 什么 ? 


图 5-31 line-height :0 去 除 间隙 的 效果 图 


简单 现象 的 背后 往往 有 大 的 学 问 ， 要 明白 其 原因 ， 束 需要 说 到 
inline-block 元 素 和 基线 baseline 之 间 的 一 些 纠缠 的 关系 。 


5.3.4 ”深入 理解 vertical-align 线 性 类 属性 值 


1. inline-block 与 baseline 


vertical-align 属 性 的 默认 值 baseline 在 文本 之 类 的 内 联 元 
素 那 里 就 是 字符 x 的 下 边缘 ， 对 于 替换 元 素 则 是 替换 元 素 的 下 边缘 。 但 
是 ， 如 采 是 inLine-b1lock 元 素 ， 则 规则 要 复杂 了 : 一 个 ijnline- 
block 元 素 ， 如 果 里 面 没 有 内 联 元 素 ， 或 者 overflow 不 是 
visible， 则 该 元 素 的 基线 就 是 其 nargin 底 边缘 ， 否 则 其 基线 就 是 
元 素 里 面 最 后 一 行内 联 元 素 的 基线 。 


还 是 没 反 应 过 来 ” 那 看 下 面 这 个 例子 ， 应 该 束 能 知道 什么 意思 


两 个 同 尺 寸 的 jnline-block 水 平 元 素 ， 唯 一 区 别 就 是 一 个 十 空 
的 ， 一 个 里 面 有 字符 ， 代 码 如 下 : 


.dib-baseline { 
display: inline-block; 
width: 150px; height: 150px; 
border: 1px solid #cad5eb ; 
background-color: #fQOf3f9; 


<span class="dib-baseline"></span> 
<span class="dib-baseline">x-baseline</span> 


结果 如 图 5-32 所 示 。 


你 会 发 现 ， 明 明 尺 寸 、display 水 平 都 是 一 样 的 ， 结 果 两 个 却 不 
在 一 个 水 平 线 上 对 齐 ， 为 什么 呢 ? 上 面 的 规范 已 经 说 明了 一 切 。 第 一 
个 框 里 面 没有 内 联 元 素 ， 因 此 基线 束 是 容 右 的 margin 下 边 绿 ， 也 束 
臣下 边框 下 面 的 位 置 ， 而 第 二 个 框 里 面 有 字符 ， 纯 正 的 内 联 元 素 ， 
此 第 二 个 框 束 是 这 些 字 符 的 基线 ， 也 就 是 字母 x 的 下 边缘 了 。 于 是 ,我 
们 就 看 到 了 左边 框框 下 边缘 和 右边 框框 里 面 字 符 x 底 边 对 齐 的 好 戏 。 


下 面 我 们 要 做 一 件 很 有 必要 的 事情 ， 来 帮助 我 们 理解 上 面 这 个 复 
杂 的 例子 在 line-height 值 为 6 后 的 表现 。 什 么 事情 呢 ? 同 情境 模 
拟 ， 我 们 也 设置 右边 框 的 line-height 值 为 0， 于 是 ， 就 有 所 图 5-33 
所 示 的 表现 。 


x-baseline 


图 5-32 ”相同 display 计 算 值 相同 尺寸 却 不 对 齐 


x-baseline 


图 5-33” 右 侧 设 置 1ine-height :09 后 的 对 齐 表现 


因为 字符 实际 占据 的 高 度 是 由 Line-height 决 定 的 ， 当 Line- 
height 变 成 9 的 时 候 ， 字 符 占据 的 高 度 也 是 09， 此 时 ， 高 度 的 起 始 位 
置 就 变 成 了 字符 内 容 区 域 的 垂直 中 心 位 置 ， 于 是 文字 就 有 一 半 落 在 框 
的 外 面 了 。 由 于 文字 字符 上 移 了 ， 上 自然 基线 位 置 (字母 x 的 底 边 缘 ) 也 
往 上 移动 了 ， 于 是 两 个 框 的 垂直 落差 就 更 大 了 。 


明白 了 这 个 简单 例子 ， 也 就 能 明白 上 面 的 两 端 对 齐 的 复杂 例子 。 
紧 接着 上 面 的 复杂 例子 ， 如 果 我 们 在 最 后 一 个 占 位 的 <i> 元 素 后 面 新 
增 同样 的 x-baseline 字 符 ， 则 结果 如 图 5-34 所 示 。 


图 5-34 line-height :0 同时 添加 x-baseline 字 符 后 的 效果 图 


这 样 大 家 是 不 是 束 可 以 明日 为 何 <i> 元 素 上 面 还 有 一 点 间 际 了 ? 


居然 还 有 人 皱眉 头 ? 那 我 再 用 文字 解释 下 : 现在 行 高 ]ine- 
height 是 0， 则 字符 x-baseline 行 间距 就 是 -lem， 也 就 是 高 度 为 
090， 由 于 CSS 世 界 中 的 行 间 距 是 上 下 等 分 的 ， 因 此 ， 此 时 字符 x- 
baseline 的 对 齐 点 就 是 当前 内 容 区 域 (可 以 看 成 文字 选中 背景 区 
域 ， 如 图 5-35 所 示 ， 截 自 Firefox 浏 览 器 ) 的 牌 直 中 心 位 置 。 由 于 图 5- 
34 中 的 x-baseline 使 用 的 是 微软 雅 黑 字体 ， 字 形 下 沉 明 显 ， 因 此 ， 


内 容 区 域 的 垂直 中 心 位 置 大 约 在 字符 x 的 上 面 1/4 处 ， 而 这 个 位 置 就 是 
字符 X-baselLine 和 最 后 一 行 图 片 下 边缘 交汇 的 地 方 。 


理解 了 x-baseline 的 牌 直 位 置 表现 ， 间 隐 问 题 束 很 好 理解 了 。 
由 于 前 面 的 <i class= "justify-fix"></i> 是 一 个 jnline- 
block 的 空 元 素 ， 因 此 基线 束 是 自身 的 压 部 ， 于 是 下 移 了 差不多 3/4 个 
x 的 高 度 ， 这 个 下 移 的 高 度 就 是 上 面 产 生 的 间 际 高 度 。 


好 了 ， 一 旦 知道 了 现象 的 本 质 ， 我 们 融 能 轻松 对 症 下 药 了 ! 要 人 么 
改变 占 位 <1 > 元素 的 基线 ， 要 么 改造 < 幽灵 至 日 点 ”的 基线 位 置 ， 要 
么 使 用 其 他 vertical-align 对 齐 方式 。 


首先 来 个 最 有 意思 的 方法 ， 即 改变 占 位 <i> 元 素 的 基线 。 这 个 很 
人 简单， 只 要 在 空 的 <i> 元 素 里 面 随便 放 几 个 字符 就 可 以 了 。 例 如 ， 吕 
一 个 空格 &nbsp: 
.box { 
text-align: justify; 
line-height: 0; 
<div class="box"> 


<img src="1.jpg" width="96"> 
<img src="1.jpg" width="96"> 


<img src="1.jpg" width="96"> 
<img src="1.jpg" width="96"> 
<i class="justify-fix">&nbsp;</i> 
<i class="justify-fix">&nbsp;</i> 
<i class="justify-fix">&nbsp;</i> 
</div> 


这 时 会 发 现 间 际 没有 了 ! 为 什么 呢 ? 因为 此 时 <i> 元 素 的 基线 是 
里 面 字 符 的 基线 ， 此 基线 也 正好 和 外 面 的 “幽灵 空白 广 点 ”的 基线 位 置 


一 致 ， 没 有 了 错位 ， 目 然 殉 不 会 有 间 隐 啦 ! 效果 如 图 5-36 所 示 。 
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图 5-35 x-baseline 字 符 content area 示 意 


图 5-36 ”字符 去 除 间 除 


改造 “幽灵 空白 节点 ”的 基线 位 置 可 以 使 用 font -size， 当 字体 足 
够 小 时 ， 基 线 和 中 线 会 重合 在 一 起 。 什 么 时 候 字 体 足 够 小 昵 ? 就 是 
9。 于 是 ， 如 下 CSS 代 码 (Line-height 如 果 是 相对 font -size 的 属 
性 值 ，Line-height:06 也 可 以 省 掉 ) : 

.box { 


text-align: justify; 
font-size: 0; 


} 


效果 如 图 5-37 所 示 。 


图 5-37 font -size:0 去 除 间隙 


看 上 去 好 像 效 末 类 似 ， 都 是 没有 间 际 ， 但 是 font -size:0 下 的 
各 类 对 齐 效果 都 更 彻 抵 。 


使 用 其 他 vertical-align 对 齐 方式 就 是 让 <i> 占 位 元 素 
vertical-align:top/bottom 之 类 ， 当 前 ， 前 提 还 是 先 让 容器 
line-height:0， 例 如 : 


.box { 
text-align: justify; 
line-height: 0; 


} 
.justify-fix { 


vertical-align: bottom; /* top、middle 都 可 以 */ 
} 


关于 此 复杂 案例 有 对 应 的 原型 示意 ， 手 动 输入 
http://demo.cssworld.cn/ 5/3-6.php 或 者 扫 右 侧 的 二 维 码 。 


准确 了 解 j]jnline-block 与 baseline 之 间 多 变 的 关系 ， 除 了 便 
于 理解 一 些 令 人 抓 狂 的 现象 外 ， 还 可 以 专门 利用 其 来 简化 我 们 的 开 
发 ， 比 方 说 一 直 很 头疼 的 背景 小 图 标 和 文字 对 齐 的 问题 。 我 这 里 再 给 
大 家 介绍 一 个 vertical-align 负 值 以 外 的 其 他 处 理 技 巧 。 


例如 ， 要 删除 一 个 小 图 标 ， 通 常 的 做 法 无 非 是 下 面 两 种 : 
<i class="icon-delete"></i> 删除 


或 者 直接 一 个 按钮 图 标 ， 里 面包 含 文本 内 容 ， 人 证 可 访问 性 : 


<i class="icon-delete"> 删 除 </i> 


而 以 上 两 种 实现 基本 上 图 标 元 素 的 基线 都 是 元 素 的 下 边缘 ， 之 前 
讲 过 inline-block 元 素 的 基线 规则 一 个 jnline-block 元 厅 ， 如 
果 里 面 没 有 内 联 元 素 ， 或 者 overflow 不 是 visible， 则 该 元 素 的 基 
线 就 是 其 margin 底 边缘 。 


上 面 的 第 一 种 做 法 中 ，<i class="icon-delete"></i> 是 一 
个 空 标 签 ， 里 面 无 内 联 元 素 ， 因 此 ， 基 线 是 底 边缘 ; 而 第 二 种 做 法 
中 ， 虽 然 里 面 有 文字 ， 但 是 此 文字 是 不 显示 的 ， 因 此 开发 者 习惯 设置 
overflow:hidden， 这 又 导致 基线 是 底 边 缘 。 而 正 是 由 于 基线 是 元 
素 底 边缘 ， 才 导致 图 标 和 文字 默认 严重 不 对 齐 ! 但 是 ， 我 们 不 妨 反 过 
来 试想 下 ， 如 果 图 标 和 后 面 的 文字 高 度 一 致 ， 同 时 图 标的 基线 和 文字 
基线 一 样 ， 那 已 不 是 图 标 和 文字 天 然 对 齐 ， 根 本 融 不 需要 margin 或 
vertical-align 的 垂直 偏 移 了 ? 


完全 可 行 ， 这 里 分 享 一 下 我 总 结 的 一 套 基于 20px 图 标 对 齐 的 处 理 
技巧 ， 该 技巧 有 下 面 3 个 要 点 。 


(1) 图 标高 度 和 当前 行 高 都 是 20px。 很 多 小 图 标 背景 合并 工具 
都 是 图 标 宽 高 多 大 生成 的 CSS 宽 高 就 是 多 大 ， 这 其 实 并 不 利于 形成 可 
以 整 站 通用 的 CSS 策 略 ， 我 的 建议 是 图 标 原 图 先 扩展 成 统一 规格 ， 比 
方 说 这 里 的 20pxx20px， 然 后 再 进行 合并 ， 可 以 节约 大 量 CSS 以 及 对 
每 个 图 标 对 齐 进行 不 同 处 理 的 开发 成 本 。 


守 。 这 个 可 以 借助 :before 
和 守 轻 松 搞定 。 


(2) 图 标 标签 里 面 永远 有 
或 :after 伪 元 素 生 成 一 个 空格 


贞 岂 
这 这 


(3) 图 标 CSS 不 使 用 overflow:hidden 保 证 基线 为 里 面 字符 的 
基线 ， 但 是 要 让 里 面 潜 在 的 字符 不 可 见 。 


于 是 ， 最 终 形成 的 最 佳 图 标 实践 CSS 如 下 : 


.icon { 
display: inline-block; 


width: 20px; height: 20px; 

background: url(sprite.png) no-repeat; 
white-space: nowrap; 

letter-spacing: -1em; 

text-indent: -999em; 


.icon:before { 
content: '\3000 ' ; 

} 

/ 


* js 


De 


ES 


图 标 */ 


.icon-xxx { 
background-position: © -20px; 


现在 ， 我 们 套用 这 里 的 20px 处 理 的 策略 ， 看 看 上 面 两 种 删除 小 图 
标 处 理 的 对 齐 效果 如 何 ， 手 动 输入 http://demo.cssworld.cn/5/3-7.php 或 
者 扫 下 面 的 二 维 码 。 对 齐 效 果 如 图 5-38 所 示 〈 手 机 截屏 剪辑 ) 。 


1. 空 标签 后 面 跟随 文本 3. 字号 变 大 
闸 删除 揣 删除 


2. 标签 里 面 有 “删除 "文本 向 随便 什么 文字 
闸 随便 什么 文字 


图 5-38 ”基于 内 联 基 线 的 小 图 标 对 齐 效 果 截 图 


可 以 看 人 到， 小 图 标 和 文字 对 齐 完全 不 受 font -Size 大 小 的 影响 。 
可 以 说 ， 整 个 网 站 所 有 小 图 标的 对 齐 问 题 都 可 以 解决 了 ， 节 省 了 大 量 
CSS 人 代码， 降低 了 大 量 开 发 和 维护 成 本 ， 是 个 好 处 非常 明显 的 处 理 技 
巧 。 


最 后 有 必要 说 明 一 下 ， 这 里 20px 只 是 一 种 经 验 取 值 ， 因 为 目前 的 
常见 站 点 的 字号 和 行 间距 比较 合乎 这 个 大 小 。 如 果 你 的 项 目 设计 很 大 
气 ， 字 号 默认 都 是 16px， 那 么 图 标 规格 和 默认 行 号 可 能 24px 会 更 合 
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2. 了 解 vertial-align:top/bottom 


vertial-align:top 和 vertial-align:bottom 基 本 表现 类 
似 ， 只 是 一 个 “上 ”一 个 “下 ”， 因 此 合 在 一 起 讲 。 
顾名思义 ，vertial-align:top 就 是 垂直 上 边缘 对 齐 ， 有 具体 定 
义 如 下 。 
。 内 联 元 素 : 元 素 底 部 和 当前 行 框 盒子 的 顶部 对 齐 。 
。table-cell 元 素 : 元 素 底 padding 边 缘 和 表格 行 的 顶部 对 齐 。 
用 更 通俗 的 话 解 释 就 是 ， 如 果 是 内 联 元 素 ， 则 和 这 一 行 位 置 最 高 
的 内 联 元 素 的 顶部 对 齐 ; 如 果 display 计 算 值 是 table-cel1l 的 元 
素 ， 我 们 不 妨 脑 补 成 <td> 元 素 ， 则 和 <tr> 元 素 上 边缘 对 齐 。 


vertial-align:bottom 声 明 与 此 类 似 ， 只 是 把 * 顶 部? 换 成 < 搬 
部 ”， 把 * 上 边缘 ? 换 成 * 下 边缘 ”。 


需要 注意 的 是 ， 内 联 元 素 的 上 下 边缘 对 齐 的 这 个 “边缘 ?是 当 前 “ 行 
框 盒 于 "的 上 下 边缘 ， 并 不 是 块 状 容 郁 的 上 下 边缘 。 


vertial-align 属 性 中 的 top 和 bottom 值 可 以 说 是 最 容易 理解 
的 vertial-align 属 性 值 了 ， 并 且 表 现 相 当 稳 定 ， 不 会 出 现 难以 理 
解 的 现象 ， 在 实际 开发 的 时 候 也 相当 常用 。 


末了 ， 出 个 小 题 测试 下 大 家 : 已 知 一 个 <div> 元 素 中 有 两 张 图 
片 ， 其 中 后 面 一 张 图 片 设置 了 vertial-align:bottom， 请 问 这 两 
张 图 片 的 底 边 缘 是 对 齐 的 吗 ? 


答案 : 不 是 不 对 齐 的 。 因 为 图 片 所 在 行 框 盒子 的 最 低 点 古 “ 幽 灵 空 
日 节 扩 ”的 底部 ， 所 以 最 后 的 表现 会 如 图 5-39 所 示 。 


图 5-39 ”两 张 图片 底 部 不 对 齐 


3. vertial-align:middle 与 近似 垂直 居中 


在 5.2 节 已 提 到 ，1Line-height 和 vertial-align: middle 实 
现 的 多 行文 本 或 者 图 片 的 垂直 居中 全 部 都 是 “近似 垂直 届 中 ”， 原 因 与 
vertial- align:middle 的 定义 有 关 。 


。 内 联 元 素 : 元 素 的 垂直 中 心 点 和 行 框 盒 子 基 线 往 上 1/2 x-height 


处 对 齐 。 
。 table-cell 元 素 : 单元 格 填 充 盒子 相对 于 外 面 的 表格 行 居 中 对 
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table-cel11 元 素 的 vertial-align:middle 中 规 中 矩 ， 没 什 

么 好 说 的 ， 倒 是 内 联 元 素 的 vertial-align:middle 有 很 多 说 不 完 

的 故事 。 定 义 中 “基线 往 上 1/2 x-height 处 ”， 指 的 就 是 middle 的 位 

置 ， 仔 细 品 味 一 下 , “基线 ”就 是 字符 x 底 边 缘 ， 而 x-height 束 是 字符 
x 的 高 度 。 考 虚 到 大 部 分 字体 的 字符 x 上 下 是 等 分 的 ， 因 此 ， 从 “基线 往 
上 12x-height 处 ?我们 就 可 以 看 出 是 字符 x 中 心 交 叉 点 的 位 置 。 换 名 

话说 就 是 ，vertial-align:middle 可 以 让 内 联 元 素 的 真正 意义 上 

的 垂直 中 心 位 置 和 字符 x 的 交叉 点 对 齐 。 


基本 上 所 有 的 字体 中 ， 字 符 x 的 位 置 都 是 偏 下 一 点 儿 的 ，font- 
size 越 大 偏 移 越 明 显 ， 这 才 导 人 致 默认 状态 下 的 vertial- 
align:middle 实 现 的 都 是 “近似 垂直 居中 ”。 


为 了 更 直观 地 表示 上 面 的 解释 ， 我 特意 做 了 个 演示 页 面 ， 手 动 输 
入 http://demo.cssworld.cn/5/3- 8.php 或 者 扫 下 面 的 二 维 码 。 演 示 页 面 有 
两 条 水 平 线 ， 其 中 ， 图 片上 线 显示 的 是 图 片 垂直 中 心 位 置 ， 而 贯穿 整 
个 容器 的 线束 是 容器 的 垂直 中 心 位 置 ， 可 以 看 到 ， 默 认 状 态 下 ， 两 根 
线束 不 在 一 个 水 平 线 上 ， 如 图 5-40 所 示 。 


图 5-40 ”两 条 垂直 中 心 线 示意 


因为 图 片上 的 那 根 线 趋 和 同 于 和 字符 x 的 中 心 靠近 ， 而 不 是 容器 的 垂 
直 中 心 。 如 果 我 们 把 font -size 改 大 ， 如 48px， 则 效果 更 加 明显 ， 
如 图 5-41 所 示 。 


图 5-41 ”大 字号 下 两 条 垂直 中 心 线 距 离 更 明显 


如 有 果 想 要 实现 真正 意义 上 的 垂直 居中 对 齐 ， 只 要 想 办 法 让 子 符 x 的 
中 心 位 置 殴 是 容 种 的 牌 直 中 心 位 置 即 可 ， 通 稼 的 做 法 是 设置 font - 
size:0， 整 个 字符 x 缩小 成 了 一 个 看 不 见 的 点 ， 根 据 line-height 
的 半 行 间距 上 下 等 分 规则 ， 这 个 点 就 正好 是 整个 容器 的 垂直 中 心 位 
置 ， 这 样 束 可 以 实现 真正 意义 上 的 垂直 居中 对 齐 了 。 


不 过 话 又 说 回来 ， 平 常 我 们 开发 的 时 候 ，font-size 可 能 整 
12px 或 14px， 虽 然 最 终 的 效果 是 “近似 王 直 居中 ”， 但 偏差 也 就 1px~ 
2px 的 样子 ， 普 通用 户 其 实 是 很 难 觉 察 到 其 中 的 差异 的 ， 因 此 ， 是 否 
非 要 真正 意义 上 垂直 居中 ， 还 是 要 根据 项 目的 实现 情况 权衡 做 出 决 
策 。 


5.3.5 ”深入 理解 vertical-align 文 本 类 属性 值 


文本 类 属性 值 指 的 就 是 text-top 和 text-bottom， 定 义 如 下 。 


。 Vertical-align:text-top: 盒子 的 顶部 和 父 级 内 容 区 域 的 
顶部 对 齐 。 

。Vertical-align:text-bottom: 盒子 的 底部 和 父 级 内 容 区 
域 的 底部 对 齐 。 


其 中 ， 理 解 的 难点 在 于 “ 父 级 内 容 区域 ”， 这 是 个 什么 东西 呢 ? 


内 容 区 域 从 3.4.2 节 开始 就 有 多 次 提 及 ， 在 本 书 中 ， 其 可 以 看 成 是 
Firefox/ 正 浏览 器 文本 选中 的 背景 区 域 ， 或 者 默认 状态 下 的 内 联 文本 的 
背景 色 区 域 。 而 所 谓 “ 父 级 内 容 区 域 ” 指 的 就是 在 父 级 元 素 当 前 font - 
size 和 font-family 下 应 有 的 内 容 区 域 大 小 。 


因此 ， 这 个 定义 又 可 以 理解 为 (以 text -top 举 例 ) : 假设 元 素 
后 面 有 一 个 和 父 元 素 font - size、font-family 一 模 一 样 的 文字 
内 容 ， 则 vertical-align:text-top 表 示 元 素 和 这 个 文字 的 内 容 
区 域 的 上 边缘 对 齐 。 


我 特意 制作 了 一 个 很 直观 的 演示 页 面 来 示意 text -top 和 text- 
bottom 属 性 值 的 样式 表现 ， 手 动 输 入 http://demo.cssworld.cn/5/3-9.php 
或 者 扫 右 侧 的 二 维 码 。 此 演示 页 面 有 3 个 不 同 font -size， 分 别 是 
16px、24px 和 32px。 父 元 素 默 认 是 16px， 我 们 可 以 清晰 地 看 到 图 
厂 的 上 边缘 和 16px 文 字 的 内 容 区 域 的 上 边缘 对 齐 了 ， 如 图 5-42 所 示 。 
点 击 其 他 单 选 按钮 ， 改 变 父 级 元 素 的 font -size 大 小 ， 如 24px， 就 
会 看 到 图 片上 边缘 〈 对 齐 线 ) 和 24px 字 号 大 小 的 文字 的 内 容 区 域 的 上 
边缘 对齐 了 ， 如 图 5-43 所 示 。 


设置 父 级 font-size 大 小 : 
@) 16PX 24px 32px 


1. vertical-atign:text-top 


图 5-42 ”图 片上 边缘 和 16px 文 字 的 内 容 区 域 的 上 边缘 对 齐 


设置 父 级 font-size 大 小 : 
l6px  (®) 24px 32px 


1. vertical-align:text- 


图 5-43 ”图 片上 边缘 和 24px 文 字 的 内 容 区 域 的 上 边缘 对 齐 


好 了 ， 现 在 我 们 深入 理解 了 文本 类 属性 值 的 表现 规则 ， 这 对 我 们 
实际 开发 有 什么 用 呢 ? 我 这 里 元 重地 告诉 大 家 : 没有 任何 作用 。 准 确 
地 讲 ， 应 该 是 其 和 其 他 垂直 定位 属性 相 比 没有 任何 的 优势 ， 尽 管理 论 
上 讲 其 特点 明确 ， 并 且 具 有 以 下 几 个 明显 的 优势 。 


百 先 ， 文 本 类 属性 值 的 垂直 对 齐 与 左右 文字 大 小 和 高 度 都 没有 大 
， 而 所 有 线性 类 属性 值 的 定位 都 会 受到 兄 第 内 联 元 于 的 影响 。 


洪 


其 次 ， 文 本 类 属性 值 的 垂直 对 齐 可 以 像素 级 精确 控制 。 通 第 而 
， 无 论 是 图 文 对 齐 还 是 文字 和 文字 对 齐 ， 文 字 大 小 或 图 片 的 高 度 都 


ll 


是 固定 的 ， 不 可 能 说 为 了 对 齐 效 果 ， 把 设计 师 设计 好 的 16px 文 学 改 成 
14px， 因 此 ， 线 性 类 属性 值 中 的 baseline 和 middle 实 现 的 对 齐 我 

们 是 无 法 精确 控制 其 垂直 对 齐 位 置 的 ， 因 为 这 两 个 值 的 对 齐 是 和 字符 
走 的 。 但 是 ，text-top 和 text-bottom 则 无 此 问题 ， 如 果 是 图 文 对 
齐 ， 我 们 可 以 通过 改变 父 元 素 的 font -size 大 小 精确 控制 对 齐 位 置 ，; 

如 果 是 文字 和 文字 对 齐 ， 我 们 可 以 改变 文字 的 line-height， 也 整 

是 通过 改变 元 素 的 高 度 (上 下 边 毕 位 置 ) 精确 控制 对 齐 位 置 。 


然而 ， 命 运 束 是 如 此 不 公 ， 有 些 CSS 属 性 设计 的 初 囊 可 能 很 简 
单 ， 结 果 却 满天飞 ， 有 些 属 性 值 理论 应 该 有 大 成 ， 实 际 却 无 人 问津 。 
vertical-align 的 文本 类 属性 值 束 是 代表 之 一 。 它 为 什么 会 有 这 样 
糟糕 的 际遇 呢 ? 


我 认为 原因 很 多 ， 具 体 有 以 下 几 个 。 


(1) 使 用 场景 缺乏 。 当 前 CSS 重 构 以 精致 布局 为 主流 , “对齐 文 
本 ”的 场景 相 比 旧时 代 要 少 很 多 。 


(2) 文本 类 垂直 对 齐 理解 成 本 高 。 我 发 现 这 样 一 个 现象 ， 当 需要 
调整 内 联 元 素 垂 直 位 置 的 时 候 ， 有 人 往往 会 使 用 非 设计 本 意 的 
margin 定 位 甚至 relative 定 位 去 纠正 不 对 齐 的 问题 ; 或 者 更 资深 一 
点 儿 的 开发 人 员 会 配合 具体 场景 使 用 合适 的 vertical-align 数 值 进 
行 定位 。 为 什么 呢 ? 因为 后 面 这 3 种 垂直 定位 策略 显然 要 比 text-top 
和 text -bottom 属 性 值 容易 理解 得 多 ， 人 简单 才 是 王道 。 


(3) 内 容 区 域 不 直观 且 易 变 。 如 今 实际 对 外 的 项 目 布 局 都 讲求 精 
确 布 局 、 像 素 级 还 原 。 而 内 容 区 域 默 认 是 看 不 见 的 ， 需 要 根据 经 验 或 
者 其 他 手段 才能 呈现 ， 这 么 麻烦 的 事情 显然 古 会 影响 开发 效率 的 ， 然 
后 最 大 的 问题 还 在 于 “ 易 变 ”"， 内 容 区 域 的 大 小 是 和 字体 font-family 
密切 相关 的 ， 要 知道 ， 不 同 的 系统 、 不 同 的 平台 使 用 的 字体 往往 都 是 
不 一 样 的 ， 比 方 襄 ，Windows 系 统 下 使 用 “微软 雅 黑 ”字体 ， 那 能 保证 
OS X 系 统 或 者 手机 系统 还 有 “微软 雅 黑 "字体 吗 ? 一 旦 字体 不 一 样 ， 内 
容 区 域 大 小 束 会 不 一 样 ， 导 致 的 束 是 不 同 设备 下 对 齐 的 位 置 是 不 一 样 
的 ， 也 就 是 我 们 所 说 的 “不 兼容 *。 如 琳 对 视觉 要 求 较 高 ， 这 显然 束 是 
一 个 比较 严重 的 问题 了 。 


于 是 ， 这 一 系列 的 原因 导致 文本 类 属性 值 虽 然 理 论 上 强大 ， 但 实 
际 实 用 价值 却 有 限 ， 至 少 我 没 发 现 什么 场景 下 其 具有 明显 的 使 用 优 
势 。 


5.3.6 ”简单 了 解 vertical-align 上 标 下 标 类 属性 值 


vertical-align 上 标 下 标 类 属性 值 指 的 惑 是 sub 和 super 两 个 
值 ， 分 别 表 示 下 标 和 上 标 。 在 HTML 代码 中 ， 有 两 个 标签 语义 就 是 下 
标 和 上 标 ， 分 别 是 上 标 <sup> 和 下 标 <sub>， 因 为 这 两 个 HTML 标 签 
长 得 很 类 似 ， 所 以 很 多 人 经 常 记 不 清 到 底 哪个 是 上 标 哪个 是 下 标 。 我 
告诉 大 家 一 个 记忆 方法 ， 就 是 看 p 和 b 两 个 字母 的 圈 圈 位 置 ， 如 果 圈 圈 
在 上 面 ， 就 是 上 标 >， 如 果 圈 圈 在 下 面 ， 就 是 “下 标 ”。 


实际 上 ， 这 两 个 HTML 标 签 不 仅 语义 上 和 sub 和 super 类 似 ， 长 
相 上 也 很 像 ， 只 是 我 一 直 没 想 明 白 : 为 什么 CSS 的 vertical-align 


属性 的 下 标 是 sub， 和 HTML 标 签 <sup> 一 样 ， 而 上 标 super 却 多 了 
个 er， 和 HTML 标 签 <sub> 不 一 样 了 呢 ? 


最 后 ，HTML 标 签 <sup> 和 <sup> 的 vertical-align 属 性 也 和 
super 和 sub 有 着 非 同 一 般 的 关系 ， 那 就 是 <sup> 标 签 默 认 的 
vertical-align 属 性 值 束 是 super，<sub> 标 签 默认 的 
vertical-align 属 性 值 就 是 sub。 上 标 常用 作 标注 ， 如 图 5-44 所 
下 于 


对 应 HTML 如 下 : 


zhangxinxu<sup>[1]</sup> 


下 标 在 数学 公式 、 化 学 表达 式 中 用 得 比较 多 ， 如 图 5-45 所 示 。 对 
HTML 如 下 : 


NH<sub>4</sub>HCO<sub>3</sub> 


zhangxinxu[ 


图 5-44 ”上 标 效 果 示 意 


NHaHCO; 


图 5-45 ”下 标 效 果 示 意 


基本 上 ，vertical-align 上 标 下 标 类 属性 值 的 实际 应 用 价值 也 
束 上 面 这 点 儿 了 ， 设 计 本 意 之 外 的 使 用 价值 几乎 殉 是 零 。 看 看 这 两 个 


属性 值 的 定义 ， 殊 知道 我 为 什么 这 么 说 了 。 


。vertical-align:super: 提高 盒子 的 基线 到 父 级 合适 的 上 标 
基线 位 置 

。Vertical-align:sub: 降低 盒子 的 基线 到 父 级 合适 的 下 标 基 
线 位 置 。 


没 想到 规范 中 也 会 出 现 * 合 适 ”这 样 横 术 两 可 的 名 词 ， 这 束 让 人 很 
荡然 了 。 所 以 ， 想 利用 此 属性 精确 定位 和 布局 显得 困难 重重 ， 只 能 
来 实现 对 垂直 位 置 要 求 不 高 的 上 标 下 标 效果 。 


然后 ， 有 一 点 需要 注意 ，vertical-align 上 标 下 标 类 属性 值 并 
不 会 改变 当前 元 素 的 文字 大 小 ， 千 万 不 要 被 HIML 标 签 中 的 <sSup> 和 
<Sub> 误 导 ， 因 为 这 两 个 HTML 标 签 默认 font -size 是 smaller， 如 
图 5-46 中 所 示 的 Chrome 浏 贤 絮 内 置 CSS 设 置 。 


sub { user agent stylesheet 
vertical-align: sub; 
font-size: smaller; 

} 


图 5-46 ”Chrome 浏 览 器 <sub> 内 置 CSS 声 明 截 图 


5.3.7 “无 处 不 在 的 vertical-align 


本 下 算是 对 之 前 内 容 的 一 个 必要 的 总 结 。 对 于 内 联 元 素 ， 如 采 大 
家 过 到 不 太 好 理解 的 现象 ， 请 一 定 要 意识 到 ， 有 个 “幽灵 空 昌 节点 ”以 
及 无 处 不 在 的 vertical-align 属 性 


虽然 同属 线性 类 属性 值 ， 但 是 top/bottom 和 
baseline/middle 却 是 完全 不 同 的 两 个 帮派 ， 前 者 对 齐 看 边缘 看 行 
框 盒子 ， 而 后 者 是 和 字符 x 打 交道 。 因 此 ， 细 细 考 究 ， 两 者 的 行为 表现 
实则 大 相 径 庭 ， 一 定 要 注意 区 分 。 


vertical-align 属 性 值 的 理解 可 以 说 是 CSS 世 界 中 的 最 难点 。 
惠 先 ， 需 要 深入 了 解 内 联 盒 模型 ， 其 次 ， 不 同属 性 值 定 义 完 全 不 同 ， 
且 很 多 属性 table-cel1 元 素 有 着 不 同 的 定义 ;同时 和 最 终 表现 与 字符 
x、line-height， 和 font-size、font-family 属 性 密切 相关 ， 
如 果 要 通 透 ， 需 要 对 这 些 属性 都 有 比较 深入 的 了 解 ， 因 此 ， 本 章 的 内 
容 是 值得 反复 研读 的 。 


本 章 目 前 给 出 的 所 有 示例 都 是 展示 单 属 性 值 和 默认 值 baseline 
如 何 作用 的 ， 但 是 实际 开发 的 时 候 ， 经 常会 出 现 前 后 两 个 内 联 元 素 同 
时 设置 baseline 以 外 属性 值 的 情况 ， 有 些 人 可 能 会 手足 无 措 ， 毕 竟 
单个 属性 值 的 理解 就 够 哈 ， 多 个 属性 一 起 岂 不 脑子 都 转 不 过 来 ? 实际 
上 ， 根 据 我 的 反复 测试 和 确认 ，vertical-align 各 类 属性 值 不 存在 
相互 冲突 的 情况 ， 虽 然 某 个 vertical-align 属 性 值 确实 会 影响 其 他 
元 素 的 表现 ， 但 是 这 种 作用 并 不 是 直接 的 。 所 以 ， 在 分 析 复 杂 场 景 的 
时 候 ， 仅 需要 套用 定义 分 析 当 前 vertical-align 值 的 作用 就 可 以 


5.3.8 ”基于 vertical-align 属 性 的 水 平 垂直 居中 弹 框 


最 后 ， 推 荐 一 个 我 目 己 觉得 非常 棱 的 vertical-align 属 性 实 
践 ， 束 是 使 用 纯 CSS 实 现 大 小 不 固定 的 弹 框 永远 居中 的 效果 ， 并 且 如 


果 伪 元 素 换 成 普通 元 素 ， 连 下 7 浏览 器 都 可 以 兼容 。 


其 HTML 结 构 很 简单 ， 一 个 container， 显 示 半 透明 背景 ， 然 后 
里 面 的 子 元 素 就 是 弹 杠 主体， 假设 类 名 是 .dialog， 则 HTML 如 下 : 


<div class="container"> 


<div class="dialog"></dialog> 
</div> 


核心 CSS 代 码 如 下 : 


.Container { 
position: fixed; 
top: ©0; right: ©0; bottom: 0; left: 
background-color: rgba(0,o0,0,.5); 
text-align: center,; 
font-size: 0; 
white-space: nowrap; 
overflow: auto; 
} 
.Container:after { 
content: ''; 
display: inline-block; 
height: 100%; 
vertical-align: middle; 


} 

.dialog { 
display: inline-block; 
vertical-align: middle; 
text-align: left; 
font-size: 14px; 
white-space: normal; 


此 时 ， 无 论 浏览 器 尺寸 是 多 大 ， 也 无 论 弹 框 尺寸 是 多 少 ， 我 们 的 
弹 框 永远 都 是 后 中 的 。 眼 见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/5/3- 
10.php 或 者 扫 右 侧 的 二 维 码 。 


目前 主流 实现 ， 尤 其 传统 PC 端 页 面 ， 几 乎 都 是 根据 浏览 器 的 尺寸 
和 弹 框 大 小 使 用 JavaScript 精 确 计算 弹 框 的 位 置 。 相 比 传统 的 JavaScript 
定位 ， 这 里 的 方法 优点 非常 明显 。 


(1) 节省 了 很 多 无 谓 的 定位 的 JavaScript 代 码 ， 也 不 需要 浏览 器 
resize 事 件 之 类 的 处 理 ， 当 弹 框 内 容 动态 变化 的 时 候 ， 也 无 须 重 新 
定位 。 


(2) 性 能 更 改 、 演 染 速 度 更 快 ， 毕 竟 浏 览 器 内 置 CSS 的 即时 泻 梁 
显然 比 JavaScript 的 处 理 要 更 好 。 


(3) 可 以 非常 灵活 控制 垂直 居中 的 比例 ， 比 方 说 设置 : 


.Container:after { 


height: 90%; 


则 弹 框 不 是 垂直 居中 对 齐 ， 而 是 近 似 上 下 2:3 这 种 感觉 的 对 齐 ， 反 而 会 
让 人 有 视觉 上 居中 的 感觉 。 


(4) 容器 设置 overflow:auto 可 以 实现 弹 框 高 度 超 过 一 屏 时 依 
然 能 看 见 屏幕 外 的 内 容 ， 传 统 实 现 方 法 则 比较 槛 和 罚 。 


然后 ， 这 里 的 技巧 还 有 一 个 关键 点 是 半 透 明 黑 色 蒙 层 和 弹 框 元 素 
是 在 一 起 的 父子 关系 。 所 以 ， 上 面 的 示例 代码 中 ， 半 透明 黑色 蒙 层 效 
有 果 借 助 rgba 半 透明 背景 色 实 现 ， 对 于 不 文 持 rgba 的 正 8 浏 览 右 ， 我 建 
议 制 作 一 个 例如 10 像 素 x10 像 素 的 同等 效果 的 半 透 明 PNG 图 片 ， 然 后 
作为 base64 URL 地 址 直接 使 用 ， 可 参考 上 面 的 演示 3-10， 或 者 也 可 以 
使 用 正 的 渐变 滤 镜 实现 。 


此 方法 实现 的 原理 关键 瓯 是 两 个 vertical-align:middle， 
前 面 “ 图 片 近 似 垂直 居中 ”那里 只 图 片 一 个 元 系 vertical- 
align:middle 残 实现 了 垂直 居中 ， 原 因 丈 是 Line-height 大 小 设 
置 得 恰到好处 ， 但 是 对 于 弹 框 ， 高 度 不 确定 ， 显 然 不 能 使 用 某 个 具体 
的 行 高 值 创建 足够 高 的 内 联 元 素 。 于 是 ， 这 里 借助 伪 元 素 创建 了 一 个 
和 外 部 容器 一 样 高 的 宽度 为 0 的 jnline- block 元 素 。 有 种 “幽灵 空 
日 太太 ”的 感觉 。 


下 面 是 原理 作用 的 关键 部 分 ， 在 5.3.7 节 讲 过 如 何 分 析 多 个 
vertical-align 的 作用 ， 根据 定义 专注 当前 元 素 即 可 。 
vertical-align:middle 定 义 是 元 素 的 中 线 和 字符 x 中 心 点 对 齐 。 


(1) 在 本 例 中 ， 由 于 font -Size 设置 为 90， 所 以 x 中 心 点 位 置 就 
是 ,container 的 上 边 绿 ， 此 时 ， 高 度 100% 的 宽度 为 9 的 仿 元 素 和 这 
个 中 心 点 对 齐 。 如 果 中 心 点 位 置 不 动 ， 这 个 伪 元 素 上 面 一 半 的 位 置 应 
该 在 .container 的 外 面 ， 但 是 CSS 中 默认 是 左上 方 排列 对 齐 的 ， 所 


以 ， 伪 元 素 和 这 个 原本 在 容 船 上 边缘 的 x 中 心 点 一 起 往 下 移动 了 半 个 容 
妖 高 度 ， 也 就 是 此 时 x 中 心 点 就 在 容 右 的 垩 直 中 心 线 上 。 


(2) 弹 框 元 素 .dialog 也 设置 了 vertical-align:middle。 
根据 定义 ， 弹 框 的 垂直 中 心 位 置 和 x 中 心 点 位 置 对 齐 ， 此 时 ，x 中 心 点 
就 在 容器 的 垂直 中 心 位 置 ， 于 是 .dialog 元 素 就 和 容器 的 垂直 中 心 位 
置 对 齐 了 ， 从 而 实现 了 垂直 届 中 效果 。 


(3) 水 平 居中 就 text-align:center 实 现 ， 非 常 好 理解 。 


按照 初衷 ， 块 级 元 素 人 负责 布局 ， 内 联 元 素 设 置 内 容 。 但 是 ， 这 里 
的 弹 框 居中 却 是 把 块 级 元 素 内 联 化 ， 利 用 一 些 内 联 属 性 实现 垂直 居中 
效果 ， 这 也 是 不 得 已 而 为 之 ， 因 为 vertical-align 等 内 联 属性 确实 
比 块 级 属性 强悍 ， 也 正 因为 CSS 世 界 在 布局 上 的 弱势 ， 后 来 多 栏 布 
局 、 弹 性 盒子 布局 以 及 顶 格 布局 一 个 一 个 都 出 来 补 强 了 。 


第 6 章 ” 流 的 破坏 与 保护 


CSS 世 界 中 正 第 的 流 内 容 或 者 流 布局 虽然 也 足够 强大 ， 但 是 实现 的 
总 是 方 方 正 正 、 规 规矩 矩 的 效果 ， 有 时 候 我 们 希望 有 一 些 特殊 的 布局 表 
现 ， 例 如 ， 文 字 环 绕 效 果 ， 或 者 元 素 固定 在 某 个 位 置 ， 要 实现 这 样 的 效 
果 ， 正 常 的 流 束 有 些 捉襟见肘 。 因 此 ，CSS 中 有 一 类 属性 ， 专 门 通过 破 
坏 正 党 的 “ 流 "来 实现 一 些 特殊 的 样式 表现 。 当 然 ， 所 谓 生 生 相 死 ， 既 然 
有 破坏 ， 束 有 保护 其 他 元 素 不 被 破坏 的 属性 ， 本 章 束 来 介绍 那些 “破坏 
流 ? 和 “保护 流 ” 的 CSS 属 性 。 


6.1 魔鬼 属性 float 


6.1.1 float 的 本 质 与 特性 


CSS 世 界 中 的 float 属 性 是 一 个 年 代 非 常 久远 的 属性 。 说 这 人 句 话 是 
什么 意思 呢 ? 有 时 候 ， 要 了 解 某 一 事物 ， 最 好 先 弄 清楚 其 诞生 的 时 代 背 
景 。 对 于 新 手 CSS 开 发 人 员 ， 尤 其 桌面 端 Web 广 品 开 发 人 员 ，float 属 
性 可 以 说 是 用 得 最 频繁 的 布局 属性 了 ， 所 以 他 们 很 可 能 会 对 float 属 性 
有 误解 ， 认 为 float 属 性 就 是 为 各 种 块 状 布局 而 设计 的 ， 实 际 上 不 是 
的 。 在 Web 诞 生 之 初 ， 带 宽 就 那么 一 点 点 ， 我 们 能 够 做 到 的 也 只 是 展示 
文字 以 及 零星 图 片 而 已 ， 怎 么 可 能 浮动 设计 的 目的 就 是 为 了 实现 各 种 砖 
头 式 的 复杂 布局 呢 ? 那个 年 代 复杂 布局 都 是 用 <tab1e> 实 现 的 。 既 然 这 
样 ， 那 float 属 性 设计 的 目的 究竟 是 什么 呢 ? 


很 简单 ， 一 句 话 : 浮动 的 本 质 就 是 为 了 实现 文字 环绕 效果 。 而 这 种 
文字 环绕 ， 主 要 指 的 束 是 文字 环绕 图 片 显示 的 效果 。 前 文 多 次 提 到 |， 
CSS2 属 性 的 设计 都 是 为 图 文 展示 服务 的 ，float 也 是 如 此 。 所 以 ， 大 家 应 
该 也 多 少 对 为 什么 老 正 浏 咒 器 与 浮动 相关 的 bug 一 火车 都 装 不 下 有 些 了 
解 了 吧 ! 人 家 的 功能 本 来 就 很 单线， 只 是 让 文字 可 以 绕 着 图 片 跑 ， 你 侦 
要 各 种 布局 ， 结 果 撑 不 住 了 吧 


很 显然 ， 从 float 属 性 的 设计 初衷 来 看 ， 当 下 那些 得 天 飞舞 的 序 动 
属性 完全 束 古 洪 用 了 。 


这 其 实 不 难 理解 。 当 你 手中 只 有 一 把 锤子 的 时 候 ， 你 往往 会 把 一 切 
问题 都 看 成 钉子 。 浮 动 属性 用 来 布局 非常 符合 现实 世界 的 认 知 ， 什 么 认 
知 呢 ? 就 是 搭 积木 或 者 说 驹 砖头 砌 墙 ， 反映 在 代码 实现 上 束 是 把 元 素 一 
个 一 个 定 宽 定 高 ， 通 过 浮动 一 个 一 个 堆积 起 来 ， 理 论 上 一 个 
float :left 声 明 几 乎 就 可 以 把 整个 页 面 结构 都 弄 出 来 (如 图 6-1 所 
示 ) ， 而 且 内 联 元 素 的 间隙 问题 、margin 合 并 问题 都 没有 ， 对 于 新 手 
而 言 ， 不 知道 多 开心 ! 易学 义 好 用 ， 比 “ 流 ” 这 种 玄 玄 平平 的 东西 靠 谱 多 
了 。 


width:120px; 


width:100px: 1 width:120px; width:120px; width:120px; width:120px:; 
4 float:right; 
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width:120px; width:380px: 
float:left; float:left; 


图 6-1 全 浮动 属性 搭建 网 页 结构 


乍 一 看 ，float 好 像 也 能 满足 我 们 布局 页 面 的 需求 ， 但 是 实际 上 ， 
这 种 砌 巷 头 式 的 布局 方式 就 像 妙 脆 角 ， 一 碰 就 碎 ， 主 要 在 于 其 缺少 弹 
性 。 举 个 例 和 于 ， 一 旦 某 个 列表 高 度 变 高 了 ， 则 下 面 的 列表 束 可 能 发 生 不 
愿 看 到 的 布局 错位 ， 换 或 是 日 后 我 们 需要 增加 某 个 元 素 的 宽度 ， 则 率 一 
发 而 动 全 身 ， 其 他 元 素 也 必须 跟着 调整 ， 否 则 样式 必 乱 ， 也 就 是 说 布局 
的 容错 性 很 糟糕 。 


如 采 说 得 再 远 一 点 ， 这 其 实 是 典型 的 “ 刚 与 柔 ” 的 思想 博弈 。 网 页 布 
局 如 同 我 们 构建 高 楼 大 厦 ， 总 是 需要 应 付 各 种 突 发 状况 ， 所 以 ， 好 的 网 
页 应 该 如 同好 的 建筑 。 传 统 的 楼 房 症 典型 的 “ 刚 ” 式 结构 ， 夸 尖 加 楼 板 ， 
问题 不 言 而 喻 ， 一 个 小 小 的 地 震 可 能 瑟 补 夷 为 平地 ， 而 好 的 楼 房 应 该 古 
有 “和 柔 ? 在 其 中 ， 也 驶 是 高 质量 的 钢筋 结构 ， 当 地 震 导 致 房屋 播 晃 的 时 
候 ， 可 以 通过 钢筋 的 “柔性 ” 缀 力 而 保障 整体 结构 的 稳固 。 台 风 袭 来 ， 很 
少见 到 说 柔弱 的 柳树 被 吹 倒 ， 反 而 会 经 常 看 到 坚固 的 电线 杆 被 风 吹 倒 的 
消息 ， 道 理 其 实 也 类 似 。 


说 这 么 多 下 是 要 告诉 大 家 : 浮动 是 魔 时 ， 少 彻 想 头 、 少 序 动 ， 要 更 
多 地 去 挖掘 CSS 世界 本 身 的 “流动 性 ”和 “ 目 适 应 性 ”， 以 构建 能 够 适用 于 
各 种 环境 的 高 质量 的 网 页 布局 。 


我 们 在 移动 端 开发 的 时 候 ， 不 可 避免 要 面 对 各 种 设备 尺寸 的 问题 ， 
加 上 横竖 屏 切 换 ， 其 可 变 的 外 部 环境 非常 之 多 ， 尤 其 在 初期 ,很 多 人 有 
这 样 的 想法 : 固定 宽度 320 像 素 ， 然 后 左右 留 日 ;抑或 是 320 像 素 布局 ， 
然后 根据 比例 缩放 整个 页 面 以 100% 填 满 屏 幕 宽度 。 这 些 想法 最 大 的 问 
题 在 于 思维 方式 还 是 “ 刚 * 式 思维 。 记 住 ，CSS 设 计 的 初 囊 就 是 表现 如 水 
流 ， 富 有 弹性 ,“ 契 头 式 思维 ?是 逆 道 而 行 ， 是 绝 不 可 取 的 。 


如 果 进 一 步 深 究 ,“ 刚 ? 式 思维 的 主要 原因 还 在 于 开发 人 员 对 CSS 的 
了 解 不 够 深入 ， 没 有 能 够 了 解 到 其 表层 属性 之 下 更 深入 的 流动 性 和 自 适 
应 性 。 这 其 实 是 一 个 很 大 的 问题 ， 因 为 虽然 前 端 从 业 人 员 众 多 ， 但 是 仍 
有 很 大 一 部 分 人 不 会 得 到 这 些 深入 的 知识 和 技能 ， 也 就 很 难 跳出 这 些 
定 布局 的 思维 方式 。 好 在 CSS 的 设计 总 是 因 和 需求 而 生 ，CSS2 的 设计 是 面 
向 图 文 展示 ，CSS3 的 设计 则 是 为 了 更 绚丽 的 视觉 效果 和 更 丰富 的 网 页 布 
局 ， 所 以 ，CSS3 出 现 了 类 似 flex 弹 性 盒子 布局 这 种 更 表层 、 更 上 层 、 
更 浅显 、 更 直 白 的 CSS 属 性 ， 以 另外 一 种 更 加 简单 的 方式 让 大 家 不 得 不 
以 自 适应 的 方式 去 实现 布局 。 


在 第 3 章 介绍 width 属性 时 曾 提 到 过 我 总 结 的 一 套 “ 鞠 三 无 准则 ”， 
即 “无 宽度 ， 无 图 片 ， 无 浮动 "! 之 所 以 要 “无 浮动 "， 一 个 原因 是 纯 序 动 
布局 容错 性 莽 ， 容 易 出 现 比较 严重 的 布局 问题 ， 还 有 一 个 原因 束 是 
float 本 身 束 是 魔 风 属性 ， 容 易 出 现 意 料 之 外 的 情况 ， 这 里 的 意料 之 外 
除了 float 属 性 自身 特性 (如 父 元 素 高 度 塌陷 ) 导致 的 布局 问题 外 ， 还 


包括 诸多 兼容 性 问题 。 千 万 不 要 以 为 只 要 不 用 管 IE6 和 正 7 浏览 器 承 可 以 
高 枕 无 优 了 ， 实 际 上 ， 当 下 float 属 性 还 是 存在 一 些 兼 容 性 问题 的 (6.5 
节 中 会 有 演示 ) 

如 果 更 进一步 深入 分 析 我 们 就 会 发 现 ，float 属 性 的 种 种 归根 结 底 
还 是 由 于 自身 各 种 特性 导致 的 。f1loat 都 有 哪些 有 意思 的 特性 呢 ? 具体 
如 下 : 


。 包 庄 性 ; 

。 块 状 化 并 格式 化 上 下 文 ; 
。 破坏 文档 流 ; 

。 没 有 任何 margin 合 并 ; 


包 吾 性 ”在 3.2.1 节 有 详细 阐述 ， 可 能 很 多 人 都 挟 记 了 ， 这 里 再 简单 
提 一 下 。 所 谓 “ 包 囊 性 ”， 由 “ 包 圳 ”和 * 目 适应 性 ?两 部 分 组 成 。 


(1) 包 庄 。 假 设 浮动 元 素 父 元 素 宽度 200pX， 浮 动 元 素 子 元 素 是 
一 个 128px 宽 度 的 图 片 ， 则 此 时 浮动 元 素 宽度 表现 为 “ 包 右 ”， 束 是 里 面 
图 片 的 宽度 128px， 代 码 如 下 : 


.father { width: 200px; } 
.float { float: left; } 
float img { width: 128px; } 
<div class="father"> 


<div class="float"> 
<img src="1.jpg"> 
</div> 
</div> 


(2) 目 适 应 性 。 如 果 浮 动 元 素 的 子 元素 不 只 是 一 张 128px 宽 度 的 
图 片 ， 还 有 一 大 波 普通 的 文字 ， 例 如 ; 


<div class="father"> 
<div class="float"> 


<img src="1.jpg"> 我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 


</div> 
</div> 


则 此 时 浮动 元 素 宽 度 就 自 父 元 素 的 200px 宽 度 ， 最 终 的 宽度 表现 也 
是 200px。 


当然 ， 要 想 最 大 宽度 自 适 应 父 元 素 宽 度 ， 一 定 是 在 浮动 元 素 的 “ 首 
选 最 小 宽度 ” 比 父 元 素 的 宽度 要 小 的 前 所 下 ， 比 方 说 上 面 示意 的 “我 是 帅 
可 ”等 文字 全 是 一 连 串 超 长 的 英文 字母 ， 则 浮动 元 素 的 宽度 显然 束 不 十 
200px 了。 如 末 还 不 理解 ， 建 议 再 次 深入 3.2 市 的 内 容 ， 这 里 不 再 资 述 。 


块 状 化 的 意思 是 ， 元 素 一 旦 float 的 属性 值 不 为 none， 则 其 
display 计 算 值 就 是 plock 或 者 table。 举 个 例子 ， 打 开 浏 览 器 控制 
人 台 ， 输 入 如 下 JavaScript 代 码 : 


var Span = document.createElement('span'); 
document .body.appendchild( span); 
console.log('1. ' + window.getComputedStyle(span).display); 


// 设置 元 素 左 浮动 
span.style.cssFloat = 'left'; 
console.l1og('2. ' + window.getComputedStyle(span).display); 


结果 如 图 6-2 所 示 。 


Var span = document.createElement('span'); 
document .body .appendChild(span); 


console.log('1. " + Window.getComputedStyle(span).display); 
span. EC = "left"; 

console. log( ”+ Window.getComputedStyle(span).display); 
1. inline 

2. block 


图 6-2 ”浮动 让 元 素 块 状 化 


因此 ， 没 有 任何 理由 出 现下 面 的 样式 组 合 : 


Span 1{ 
display: block;  /* 多 余 */ 
float: left,; 


} 


Span 1 
float: left,; 
vertical-align: middle; 


} 


也 不 要 指望 使 用 text-align 属 性 控制 浮动 元 素 的 左右 对 齐 ， 因 为 
text-align 对 块 级 元 素 是 无 效 的 。 


float 属 性 与 dijsplay 属 性 值 转换 关系 如 表 6-1 所 示 。 


表 6-1 float 与 display 转 换 关系 表 


站 


table-column-group 


0 


WE 
> 


除了 inline-table 计 算 为 table 外 ， 其 他 全 都 是 plock。 至 于 
float 元 素 的 块 状 格式 化 上 下 文 特性 ， 参 见 6.3 节 。 


最 后 着 重 讲 一 下 float 符 性 的 精 能 一 一 “破坏 文档 流 ”， 这 可 以 说 是 
float 属 性 的 万 恶 之 源 ， 但 也 是 float 属 性 的 立 命 之 本 ， 是 其 作用 机 制 
RT 


6.1.2 float 的 作用 机 制 


float 属 性 有 个 著名 的 特性 表现 ， 束 是 会 让 父 元 素 的 高 度 塌陷 ， 大 
多 数 场 景 下 ， 这 种 特性 会 影响 “正常 的 ”布局 ， 这 里 我 特意 把 “正常 的 ”三 
个 字 加 了 引号 ， 因 为 站 在 CSS 属 性 的 角度 讲 ， 我 们 希望 的 结果 反而 是 


种 不 正常 ， 高 度 塌陷 才 是 正常 。 甚 至 有 些 人 会 问 这样 的 问题 : “如 何 解 
决 浮动 让 父 元 素 融 度 塌陷 的 bug? ” 


bug? 别 逗 了 。 一 定 和 要 明确 这 一 点 ， 浮 动 使 高 度 塌 陷 不 是 bug， 而 十 
标准 ! 有 人 可 能 会 有 疑问 了 : 怎么 会 有 规范 让 人 * 王 坏事” 的? 


还 记 不 记得 上 面 说 过 的 float 属 性 的 原本 作用 “只 是 为 了 实现 文字 
环绕 效果 ”? 所 以 ， 假 如 你 是 CSS 世 界 的 设计 者 ， 你 会 如 何 利 用 古老 的 
CSS 盒 模型 规则 实现 文字 环绕 效果 ? 


CSS 的 设计 者 吏 想 到 了 "破坏 文档 流 ”" 这 一 招 ， 具 体 招 式 可 参见 下 面 
的 图 例 讲解 ， 故 事 的 至 景 古 这 样 的 .我们 的 男 主人 公 不 仅 人 长 得 是 ， 而 
且 心 地 非常 善 民 ， 总 是 去 外 面 给 流浪 的 小 猫 小 狗 喂食 ， 但 是 给 小 动物 蝶 
食 非常 耗费 时 间 ， 影 响 学 业 ， 因 此 主人 公 的 父 杀 把 男 主 锁 在 家 里 ， 束 像 
图 6-3 所 示 这 样 ， 一 个 框 把 男 主 人 公 给 限制 住 了 。HTML 结 构 如 下 : 


<div class="father"> 
<img src="me.jpg"> 


</div> 
<p class="animal"> 小 猫 1， 小 猫 2，.. .</p> 


但 是 ， 天 天 学 习 谁 也 受 不 了 ， 为 了 摆脱 父亲 的 限制 ， 男 主 附 加 了 魔 
鬼 属 性 float ， 这 种 属性 的 作用 之 一 就 是 可 以 使 父 元 素 的 高 度 塌陷 (如 
图 6-4 所 示 ) ， 于 是 男 主 就 这 么 摆脱 了 父亲 的 限制 。 没 有 了 父亲 的 限 
制 ， 男 主 束 可 以 和 外 面 的 小 动物 接触 了 ， 如 图 6-5 所 示 。 


从 上 面 的 故事 可 以 看 出 ，float 属 性 让 父 元 素 高 度 塌陷 的 原因 束 是 
为 了 实现 文字 环绕 效果 。 但 是 ， 后 来 事情 的 发 展 超出 了 CSS 设 计 者 的 意 
料 ， 图 文 展示 只 是 新 时 代 Web 展 示 的 一 小 部 分 ， 而 文子 环绕 这 种 上 世纪 


风格 的 效果 现在 已 然 不 流行 了 ， 于 是 float 很 少 发 挥 其 原本 的 作用 ， 反 
而 被 大 肆 使 用 满 屏 布局 。 显 然 ， 布 局 的 时 候 是 不 需要 父 元 素 塌陷 的 。 于 
是 ， 高 度 塌陷 这 种 特性 反而 成 为 了 flLoat 属 性 一 个 不 得 不 重视 的 坑 。 


NE 
着 于 男 译 。 父 绍 限制 | 
3S 


小 猫 1 ， 小 猫 2， 小 猫 3， 小 猫 4， 小 猫 
5 ， 小 猫 6， 小 狗 1 ， 小 狗 2， 小 狗 3 ,小 
狗 4， 小 狗 5， 小 狗 6 


图 6-3 ”故事 的 主要 角色 示意 


float:left; 
LA 父 级 高 度 袁 隐 
小 猫 1， 小 猫 2， 小 猫 3， 小 猫 4， 小 猫 


5 ,小 猫 6， 小 狗 1， 小 狗 2， 小 狗 3 ,小 
狗 4， 小 狗 3， 小 狗 6 


度 开 始 塌陷 


— 


图 6-4” 男 主 浮动 ， 父 元 素 高 


然而 , “高 度 塌陷 ”只 古 让 跟随 的 内 容 可 以 和 浮动 元 素 在 一 个 水 平 线 
上 ， 但 这 只 古 实 现 “ 环 绕 效 有 果 ” 的 条 件 之 一 ， 要 想 实 现 真 正 的 “环绕 效 
果 ”， 开 需要 男 外 一 个 平时 大 家 不 太 在 意 的 特性 ， 那 束 是 “ 行 框 盒 子 和 浮 
动 元 素 的 不 可 重合 性 ”"， 也 束 是 “ 行 框 盒子 如 有 果 和 浮动 元 素 的 垂直 高 度 有 
重要 ， 则 行 框 盒子 在 正常 定位 状态 下 只 会 跟随 浮动 元 素 ， 而 不 会 发 生 重 


注意 ， 这 里 说 的 是 “ 行 框 盒子 ”， 也 束 是 每 行内 联 元 素 所 在 的 那个 盒 
子 ， 而 非 外 部 的 块 状 合子。 实际 上 ， 由 于 浮动 元 素 的 塌陷 ， 块 状 盒子 是 


和 图 片 完 全 重合 的 ， 例 如， 我 们 给 环绕 的 <p> 元 素 设 置 个 背景 色 ， 同 时 
把 图 片 搞 透 明 ， 则 效果 如 图 6-6 所 示 。 


小 猫 1 ， 小 猫 2 , 小 狂 3， 小 猫 
, 小 锚 5， 小 猫 6， 小 狗 1 ， 
小 狗 2 ， 小 狗 3 ， 小 狗 4 ,小 狗 


9 ,小 狗 6 


图 6-5 ”小 动物 们 环绕 效果 


小 猫 1， 小 猫 2， 小 猫 3， 小 猫 

4 ,小 猫 5， 小 狂 6， 小 狗 1 ， 

小 狗 2， 小 狗 3 ,小 狗 4， 小 狗 
5 ,， 小 狗 6 


图 6-6” 块 元 素 区 域 和 图 片 完全 重 肢 


但 是 ， 块 状 盒子 中 的 “ 行 框 盒子 ” 却 被 浮动 元 素 限 制 ， 没 有 任何 的 重 
县 ， 我 们 可 以 借助 : :first-1ine 伪 元 素 暴 露 第 一 行 的 “ 行 框 盒子 ”区 
域 ，CSS 代 码 如 下 : 


.animal:first-line { 
background: red; 


color: white; 


} 


结果 如 图 6-7 所 示 。 


这 种 “限制 ”是 根深 带 固 的 ， 也 束 是 “ 行 框 盒子 ”的 区 域 永远 束 这 人 么 
大 ， 只 要 不 改变 当前 布局 方式 ， 我 们 是 无 法 通过 其 他 CSS 属 性 改变 这 个 
区 域 大 小 的 。 这 束 古 在 4.3 市 提 到 的 浮动 后 面 元 素 margin 人 负 无 穷 大 依然 
无 效 的 原因 。 例 如 ， 这 里 再 新 增 如 下 CSS 代 码 : 


,animal { 
margin-left: -100px; 


忠 会 发 现 ， 只 有 外 部 的 块 状 容器 盒子 尺寸 变 大 ， 而 和 浮动 元 素 垩 直方 问 
有 重合 的 “ 行 框 人 金子 ”依然 被 限 死 在 那里 ， 如 图 6-8 所 示 。 

至 此 ， 浮 动作 用 的 基本 机 制 算 是 介绍 完了 。 那 么 了 解 fL1oat 属 性 的 
作用 机 制 有 什么 用 呢 ? 很 有 和 用， 除了 下 一 节 会 着 重 介绍 基于 float 属 性 
的 流体 布局 之 外 ， 还 有 很 有 用 的 一 点 吏 是 让 我 们 一 下 子 知道 一 些 意料 之 
外 场景 发 生 的 原因 以 及 如 何 快速 对 症 下 药 。 


被 限 人 制 的 行 杠 例 也 


|\ 多 1 ， 小 猫 2， 小 狂 3， 小 猎 
4 ,小 猫 5， 小 猫 6， 小 狗 1 ， 
小 狗 2 ， 小 狗 3， 小 狗 4 ,小 狗 
3 ,小 狗 6 


图 6-7 第 一 行 背景 显示 了 行 框 盒子 的 区 域 


| 多 1 ， 小 猫 2， 小 猫 3， 小 猫 
4 ,小 猫 5 ,小 猫 6 ,小 狗 1 ， 
小 狗 2 ,小 狗 3 ,小 狗 4 ,小 狗 


5 ， 小 狗 6 


图 6-8 行 框 盒子 区 域 固 定 


我 们 不 妨 看 下 面 这 个 很 有 学 习 价值 的 例子 。 很 多 人 会 有 这 样 的 想 
法 ， 吕 是 认为 一 个 元 素 只 要 设置 了 具体 的 高 度 值 ， 驶 不 需要 担心 fLoat 
属性 造成 的 高 度 塌陷 的 问题 了 ， 既 然 有 了 高 度 ， 何 来 “高度 塌 陷 ”。 这 人 名 
话 对 不 对 呢 ? 是 对 的 。 但 是 ， 其 中 也 隐 含 了 陷阱 ， 因 为 “文字 环绕 效 
果 ” 是 由 两 个 特性 ( 即 “ 父 级 高 度 塌陷 "和 “ 行 框 盒子 区 域 限 制 ” 共同 作用 


的 结果 ， 定 高 只 能 解决 “ 父 级 高 度 塌陷 ? 帘 来 的 影响 ， 但 是 对 “ 行 框 盒子 

区 域 限 制 ? 孝 没有 任何 效果 ， 结 果 导 致 的 问题 是 浮动 元 素 垂 直 区 域 一 旦 

超出 高 度 范围 ， 或 者 下 面 元 素 margin-top 负 值 上 偏 移 ， 就 很 容易 使 后 
面 的 元 素 发 生 “ 环 绕 效 果 ”， 代 码 示 意 如 下 : 


<div class="father"> 
<div class="float"> 
<img src="zxx.jpg"> 
</div> 
我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 
</div> 
<div> 虽 然 你 很 汕 ， 但 是 我 对 你 不 感 兴趣 。</div> 
father { 
height: 64px; 
border: 1px solid #444; 


} 
float { 
float:1left; 


} 
float img { 


width: 60px; height: 64px; 


} 


从 这 段 代码 可 以 看 出 父 级 元 素 .father 高 度 设置 的 和 图 片 高 度 一 模 
一 样 ， 都 钙 64px。 按 道理 ， 下 面 的 “虽然 你 很 籼 ， 但 古 我 对 你 不 感 兴 
趣 。” 这 些 文字 应 该 大 左 显 示 ， 但 最 后 的 结案 却 钙 图 6-9 所 示 的 这 样 。 


sng 好 巧 啊 ， 我 也 是 
' 原来 看 这 本 书 的 人 都 


77 虽然 你 很 帅 ， 但 是 我 对 你 不 


ye 


pa 


图 6-9 意料 之 外 的 文字 环绕 效 曙 


口口声声 说 < 不 感 兴 趣 *， 最 后 却 依 旧 环绕 在 帅哥 图 片 周 围 。 为 什么 
会 出 现 这 种 现象 呢 ? 


虽然 肉眼 看 上 去 容器 和 图 片 一 样 高， 但 是 ， 大 家 都 读 过 5.3 节 ， 应 
该 都 知道 内 联 状态 下 的 图 片 展 部 是 有 间 聊 的， 也 吕 是 ,float 这 个 浮动 
元 系 的 实际 高 度 并 不 是 64pXx， 而 是 要 比 64px 高 几 像素 ， 市 来 的 问题 吏 
是 浮动 元 素 的 高 度 超出 .father 几 像素 。 于 是 ， 下 面 的 文字 就 遭 玖 了 ， 
因为 “虽然 你 很 帅 .……...” 这 段 文字 所 在 的 “ 行 框 金 子 ” 和 浮动 元 素 在 垂直 位 
置 有 了 重合 ， 尺 管束 那么 几 像 素 。 于 十， 区 域 被 限制 ， 形 成 了 图 6-9 所 
示 的 “被 环绕 ”效果 。 


眼见 为 实 ， 如 果 不 相信 上 面 帅哥 的 魅力 ， 可 以 手动 输入 
http://demo.cssworld.cn/ 6/1-1.php 或 者 扫 右 侧 的 二 维 码 感受 一 下 。 


因此 ， 当 使 用 浮动 元 素 的 时 候 ， 比 较 稳 尼 的 做 法 还 是 采用 一 些 手 段 
干净 地 清除 浮动 市 来 的 影响 ， 以 避免 很 多 意料 之 外 的 样式 问题 的 发 生 。 


6.1.3 ” float 更 深入 的 作用 机 制 


实际 项 目 开 发 中 不 可 能 总 是 浮动 元 素 在 正常 流 元 素 的 前 面 ， 下 面 来 
看 一 个 例子 。 例 如 ， 有 一 个 标题 ， 代 码 如 下 : 


<h3> 标 题 </h3> 


一 直 用 得 好 好 的 ， 突 然 来 了 一 个 需求 ， 要 在 右 侧 加 一 个 “更 多 ”链接 ， 于 
是 HTML 变 成 下 面 这 样 (我 们 这 里 先 忽 略语 义 是 否 得 当 的 问题 ) : 


<h3> 标 题 <a href="#"> 更 多 </a></h3> 


请 问 : 我 们 直接 让 <a> 元 素 float :right 可 不 可 以 ? 


考虑 到 本 书 的 目标 浏览 器 是 IE8 及 以 上 版 本 浏览 器 ， 因 此 ， 答 案 
征 : 可 以 。 但 是 ， 如 琳 你 的 项 目 很 不 六 还 需要 兼容 IE7 之 类 的 浏览 器 ， 
则 不 能 这 样 处 理 ， 因 为 “更 多 ”文字 会 浮动 在 下 一 行内 容 的 右边 ， 而 非 标 
题 的 右边 。 


以 前 不 少 人 问 我 为 什么 IE6 和 IE7 浮 动 元 素 会 下 一 行 显示 ， 但 却 没有 

人 问 为 什么 正 8 及 以 上 版 本 浏 贤 器 是 在 一 行 显 示 ， 可 见 ， 似 乎 同行 显示 
更 符合 大 家 的 直观 认 知 。 好 在 规范 也 确实 约定 了 浮动 元 素 和 内 联 元 素 在 
行 显示 ,但 是 ， 如 果 我 问 大 家 具体 的 作用 机 制 是 什么 ， 芍 怕 鲜 有 人 能 


A 让 
回答 清楚 ! 


单 靠 感性 认 知 而 非 具 体 原 理 理解 CSS 的 样式 表现 很 多 时 候 是 不 靠 谱 
的 。 比 方 说 ， 还 是 这 个 例子 ， 假 设 这 里 的 “标题 "内 容 非常 长 ， 超 过 了 一 
行内 容 ， 请 问 : 这 里 的 “更 多 ”<a> 链 接 元 素 该 如 何 显示 ? 是 图 6-10 所 示 
的 这 样 吗 ? 答案 是 : 不 是 的 。 正 确 表现 应 该 如 图 6-11 所 示 。 


我 是 一 个 非常 长 足 更 多 
以 换行 的 标题 文字 内 容 


图 6-10 ”假想 浮动 效果 图 


我 是 一 个 非常 长 足以 换 
行 的 标题 文字 内 容 更 多 


图 6-11 真实 浮动 效果 图 


为 什么 呢 ? 要 想 解 释 透 彻 ， 那 话 义 多 了 。 首 先 ， 我 们 需要 了 解 两 个 
和 float 相 关 的 术语 ， 一 是 “浮动 销 点 ” (float anchor) ， 二 是 “浮动 参 


考 ” (float reference) 


。 浮动 销 点 是 float 元 素 所 在 的 “ 流 ” 中 的 一 个 点 ， 这 个 点 本 身 并 不 浮 
动 ， 就 表现 而 言 更 像 一 个 没有 margin、border 和 padding 的 空 
的 内 联 元 素 。 

。 浮动 参考 指 的 是 浮动 元 素 对 齐 参 考 的 实体 。 


在 CSS 世 界 中 ，float 元 素 的 “浮动 参考 "是 “ 行 框 盒子 "， 也 就 是 
float 元 素 在 当前 “ 行 框 盒子 "内 定位 。 再 强调 一 遍 ， 是 “ 行 框 盒子 ”， 不 
是 外 面 的 包含 块 盒子 之 类 的 东西 ， 因 为 CSS 浮 动 设计 的 初衷 仅仅 是 实现 
文字 环绕 效果 。 在 CSS 新 世界 中 ，float 被 赋予 了 更 多 的 作用 和 使 
命 ， “浮动 参考 "就 不 仅仅 是 “ 行 框 合子" 了， 不 过 此 非 本 书 重点 ， 就 不 展 
开 了 。 


正 是 因为 float 定 位 参考 的 是 “ 行 框 盒子 *"， 所 以 “更 多 ” 才 会 在 第 二 
行 显示 。 还 没 理解 ? 那 再 具体 解释 一 下 : 每 一 行内 联 元 素 都 有 一 个 “ 行 
框 盒子 ”>， 这 个 例子 中 标题 文字 比较 多 ， 两 行 显示 了 ， 因 此 有 上 下 两 
个 “ 行 框 盒子 ”， 而 “更 多 ”所 在 的 <a> 元 素 是 在 标题 文字 后 面 ， 位 于 第 二 
行 ， 因 此 ， 这 里 设置 了 float : right 的 <a> 元 素 是 相对 于 第 二 行 的 “ 行 
框 盒子 ?对 齐 的 ， 也 就 是 图 6-11 所 示 的 效果 。 


趁 热 打铁 ， 假 如 说 我 们 的 标题 文字 再 多 两 个 字 ， 正 好 两 行 ， 请 
问 : “更 多 ”两 字义 当 如 何 显 示 呢 ? 估计 不 少 人 已 经 可 以 脑 补 出 最 终 的 样 
式 表 现 了 ,“ 更 多 ”会 孤零零 地 显示 在 第 三 行 的 右边 ， 但 容 秀 高度 仍然 是 
两 行文 字 的 高 度 ， 如 图 6-12 所 示 。 


我 是 一 个 非常 长 长 到 足 
以 换行 的 标题 文字 内 容 
于 多 


图 6-12 “更 多 ”显示 在 第 3 行 


然而 ， 上 面 的 解释 有 一 个 很 大 的 漏洞 束 是 ， 如 琳 float 元 素 前 后 全 
古 块 元 素 ， 那 根本 没有 “ 行 框 盒子 ”， 何 来 对 齐 的 说 法 ?此 时 ， 束 需要 上 
面 提 到 的 “浮动 销 点 ”出马 了 。 “浮动 锁 点 "这 个 术语 名 称 本 身 很 具有 其 骆 
性 ， 看 上 去 应 该 与 fl0at 的 定位 位 置 有 关 ， 实 际 上 关系 浅薄 ， 在 我 看 
来 ， 其 作用 就 是 产生 “ 行 框 例子 ”"”， 因 为 “浮动 销 点 ”表现 如 同一 个 空 的 内 
联 元 素 ， 有 内 联 元 素 目 然 束 有 “ 行 框 盒子”， 于 是 ，flLoat 元 素 对 齐 的 参 
考 实 体 “ 行 框 盒 子 ? 对 于 块 状 元 素 也 同样 适用 了 ， 只 不 过 这 个 “ 行 框 盒 
子 " 由 于 没有 任何 内 容 ， 所 以 无 太 寸 ， 看 不 见 也 措 不 着 有 了 。 


6.1.4 float 与 流体 布局 


float 通 过 破坏 正常 CSS 流 实现 CSS 环 绕 ， 带 来 了 烦人 的 “高 度 塌 
陷 ?” 的 问题 ， 然 而 ， 凡 事 都 具有 了 两面性， 只 要 了 解 透彻 ， 说 不 定 就 可 以 
变 废 为 宝 、 化 腐朽 为 神奇 。 例 如 。 我 们 可 以 利用 float 破 坏 CSS 正 常 流 
的 特性 ， 实 现 两 栏 或 多 栏 的 自 适 应 布局 。 


还 记 不 记得 之 前 小 动物 环绕 的 例子 ? 其实 我 们 稍 加 改造 ， 就 能 变 成 
一 侧 定 宽 的 两 栏目 适应 布局 ，HTML 和 CSS 代 码 如 下 : 


<div class="father"> 
<img src="me.jpg"> 


<p class="animal"> 小 猫 1， 小 猫 2，.. .</p> 
</div> 
father { 

overflow: hidden,; 


father > img { 
width: 60px; height: 64px; 
float: left; 


,animal { 
margin-left: 70Opx; 


和 文学 环绕 效果 相 比 ， 区 别 就 在 于 ,animal 多 了 一 个 margin- 
left:70px， 也 就 是 所 有 小 动物 都 要 跟 男 主 保持 至 少 70px 的 距离 ， 由 
于 图 片 宽度 就 669px， 因 此 不 会 发 生 环 绕 ， 自 适应 效果 达成 。 


原理 其 实 很 简单 ，,animal 元 素 没 有 浮动 ， 也 没有 设置 宽度 ， 
此 ， 流 动 性 保持 得 很 好 ， 设 置 margin-left、border-1left 或 者 
padding-left 都 可 以 自动 改变 content box 的 尺寸 ， 继 而 实现 了 宽度 自 
适应 布局 效果 。 


我 们 不 妨 对 比 一 下 环绕 效果 的 背景 区 域 和 这 里 目 适 应 效果 的 背景 区 
域 ( 见 图 6-13) ， 理 解 起 来 应 该 会 更 加 直 白 。 


小 猫 1， 小 狭 2， 小 猫 3 ,小 小 猫 1 ,小 猫 2 ,小 猫 3 ,小 
猫 4， 小 猫 5， 小 猫 6， 小 狗 猫 4， 小 猫 5， 小 猫 6， 小 狗 
1 ,小 狗 2， 小 狗 3， 小 狗 4 ， 1 ,小 狗 2， 小 狗 3， 小 狗 


小 移 5 ,小 狗 6 TO0px 一 3 年 ,小 铭 9 ;小 移 6 


图 6-13 ”环绕 效果 和 自 适 应 效果 背景 区 域 对 比 图 


没有 对 比 台 没 有 震撼 。 很 多 人 实现 这 样 的 效果 会 采用 下 面 这 样 的 砖 
头 式 的 浮动 布局 : 


.animal { 
width: 170px; 


float: right; 


} 


乍 一 看 ， 效 果 一 样 ， 但 是 实际 上 这 容错 性 和 可 拓展 性 就 差 远 了 。 一 
旦 我 们 的 容器 宽度 发 生 了 变化 ， 那 么 这 个 布局 就 基本 作废 ， 宽 度 小 了 
两 栏 内 容 上 下 错位 ， 宽 度 变 大 ， 中 间 间 际 宽 到 可 以 撑 船 ， 就 是 因为 浮动 
和 宽度 破坏 了 CSS 的 流动 性 。 这 种 感觉 就 像 是 把 记忆 合金 变 成 了 死板 砖 
头 。 在 我 看 来 ， 这 类 布局 是 没有 任何 理由 使 用 这 种 “ 砌 砖头 ” 式 的 技术 方 
案 的 。 一 个 简 简 单单 的 margin-left 岂 不 比 需 要 计算 、 代 码 量 多 、 可 
维护 性 差 的 一 堆 CSS 代 码 好 很 多 | 


天 于 此 目 适 应 布局 效果 ， 可 以 手动 输入 http://demo.cssworld.cn/6/1- 
2.php 或 者 扫 右 侧 的 二 维 码 感受 一 下 。 


一 般 而 言 ， ee 侧 定 宽 一 侧目 适应 : 如 采 是 宽度 不 
固定 ， 也 有 办 法 处 理 ， 这 会 在 6.3.2 节 中 介绍 。 如 果 征 百分比 宽度 ， 则 也 


征 可 以 的 ， 例 如 ; 


.left { 
float: left,; 
width: 50%; 


} 
.right 1 
margin-left: S50%; 


如 采 是 多 栏 布 局 ， 也 同样 适用 ， 尤 其 独 6-14 所 示 的 这 种 布局 。 


刘 
请 
NN 
基 
= 
和 车 
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洛 
| 
出 


图 6-14 中间 内 容 居中 的 左 中 右 布局 


假设 HTML 结 构 如 下 : 


<div class="box"> 
<a href class="prev">&laquo; 上 一 章 </a> 
<a _ href class="next"> 下 一 章 &raquo;</a> 
<h3 class="title"> 第 112 章 动物 环绕 </h3> 
</div> 


则 CSS 可 以 如 下 : 
,prev { 
float: left; 


.Next { 
float: right; 


} 

.title { 
margin: © 70px; 
text-align: center; 


} 


也 就 是 说 ，,tit1le 所 在 的 <h3> 标 题 元 素 直 接 左 右 margin， 借 助 流体 
特性 ， 保 证 不 会 和 两 个 文字 链接 重 秦 。 


6.2 float 的 天 然 克 星 clear 


6.2.1 什么 是 clear 属 性 


生生 相克 ，float 这 个 魔 风 属性 也 不 例外 。CSS 有 一 个 专门 用 来 处 
理 float 属 性 市 来 的 高 度 塌 陷 等 问题 的 属性 ， 这 个 属性 束 古 clear。 其 
语法 如 下 : 


clear: none | left | right | both 


如 果 单 看 字面 意思 ，clear :1left 应 该 是 “清除 左 浮动 ”， 
clear :right 应 该 是 “清除 右 浮动 ”的 意思 ， 实 际 上 ， 这 种 解释 是 有 问 
题 的 ， 因 为 浮动 一 直 还 在 ， 并 没有 清除 。 没 错 ， 并 没有 清除 。 


官方 对 clear 属 性 的 解释 是 : “元 素 盒子 的 边 不 能 和 前 面 的 浮动 元 
素 相 邻 。” 


虽然 有 些 挝 口 ， 但 是 有 一 点 是 可 以 体会 出 来 的 ， 台 是 设置 了 clear 
属性 的 元 素 自 身 如 何如 何 ， 而 不 是 让 float 元 素 如 何如 何 ， 有 种 “已 所 
不 欲 勿 施 于 人 ”的 意味 在 里 面 。 因 此 ， 我 对 clear 属 性 值 的 理解 症 下 面 
这 样 的 。 


。none: 默认 值 ， 左 右 浮动 来 就 来 。 
。 Teft: 左 侧 抗 浮动 。 
。 right: 右 侧 抗 浮动 。 


。 both: 两 侧 抗 浮动 。 


大 家 有 没有 发 现 ， 我 们 平时 除了 clear :both 这 个 声明 比较 多 以 
外 ，left 和 right 这 两 个 属性 值 几 乎 无 人 问津 ， 是 因为 left 和 right 
这 两 个 值 没有 作用 吗 ? 


我 的 答案 非常 直 白 : 没 错 ， 确 实 没 有 什么 用 ! 凡是 clear :left 或 
者 clear :right 起 作用 的 地 方 ， 一 定 可 以 使 用 clear :both 替 换 ! 


举 个 例子 ， 假 设 容 器 宽度 足够 宽 ， 有 10 个 <1i> 元 素 ， 设 置 了 如 下 
CSS 代 码 : 


1i { 
width: 20px; height: 20px; 
margin: Spx; 
float: left; 


} 
li:nth-of-type(3) { 
clear: both,; 


也 就 是 说 ， 第 三 个 <1i> 设 置 了 clear :both， 请 问 表 现 是 怎样 的 ? 或 
者 这 么 问 吧 : 列表 最 后 是 1 行 显示 、2 行 显示 ， 还 是 3 行 显 示 呢 ? 


我 们 很 容易 被 both 这 个 单词 误导 ， 因 为 其 字面 意思 是 “同时 ”， 所 
以 很 多 人 会 认为 是 3 行 ， 但 实际 上 只 会 显示 2 行 ， 如 图 6-15 所 示 。 


图 6-15 ”列表 2 行 显示 


原因 在 于 ，clear 属 性 是 让 目 身 不 能 和 前 面 的 浮动 元 素 相 邻 ， 注 意 
这 里 “前 面 的 ”3 个 字 ， 也 就 是 clear 属 性 对 “后 面 的 ”浮动 元 素 是 不 闻 不 问 
的 ， 因 此 才 2 行 显示 而 非 3 行 。 


更 进一步 ， 考 虑 到 float 属 性 要 么 束 left 要 么 就 right， 不 可 能 
同时 存在 ， 同 时 由 于 clear 属 性 对 “后 面 的 ”浮动 元 素 不 闻 不 问 ， 因 此 ， 
当 clear : left 有效 的 时 候 ，clear :right 必 定 无 效 ， 也 就 是 此 时 
clear :left 等 同 于 设置 clear :both; 同样 地 ，clear :right 如 果 
有 效 也 是 等 同 于 设置 clear :both。 由 此 可 见 ，clear :left 和 
clear :right 这 两 个 声明 就 没有 任何 使 用 的 价值 ， 至 少 在 CSS 世 界 中 
是 如 此 ， 直 接 使 用 clear:both 吧 。 


6.2.2 成事 不 足 败 事 有 余 的 clear 


clear 属 性 只 有 块 级 元 素 才 有 效 的 ， 而 : :after 等 伪 元 素 默认 都 是 
内 联 水 平 ， 这 束 是 借助 盆 元 素 清 除 浮动 影响 时 需要 设置 dijsplay 属 性 值 
的 原因 。 


.Clear:after { 


content: 

display: table; // 也 可 以 是 'block'， 或 者 是 '1ist-item' 

clear: both; 
} 
然而 ， 利 用 伪 元 素 或 者 直接 使 用 下 面 HTML， 有 时候 也 会 产生 一 些 意 想 
不 到 的 问题 : 


<div style="clear:both;"></div> 


继续 前 面 那个 小 动物 环绕 的 例子 ， 如 果 我 们 在 右 侧 自 适应 内 容 里 面 
使 用 了 类 似 这 样 的 样式 ， 则 可 能 会 发 生 右 边 的 内 容 跑 到 图 片 下 边 的 情 
况 ，HTML 代 码 如 下 : 


<div class="father"> 
<img src="me.]jpg"> 
<div class="animal"> 
小 独 1， 小 猫 2， 


<div class="clear"></div> 
小 猎 3， 小 猫 4，.. ， 
</div> 
</div> 


结果 却 是 如 图 6-16 所 示 。 有 眼见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/6/2-1.php 或 者 扫 下 面 的 二 维 码 。 


小 镜 1 ， 小 猫 2 ， 


小 猎 3， 小 猫 4 ,小 猫 3 ,小 


3 ,小 狗 4， 小 狗 3， 小 狗 6 


图 6-16 ”clear :both 导 致 自 适应 布局 错位 示意 


由 于 clear :both 的 作用 本 质 是 让 自己 不 和 float 元 素 在 一 行 显 
示 ， 并 不 是 真正 意义 上 的 清除 浮动 ， 因 此 float 元 素 一 些 不 好 的 特性 依 
然 存 在 ， 于 是 ， 会 有 类 似 下 面 的 现象 。 


(1) 如 果 clear :both 元 素 前 面 的 元 素 就 是 float 元 素 ， 则 
margin-top 负 值 即使 设 成 -9999px， 人 也 不 见 任何 效果 。 


(2) clear :both 后 面 的 元 素 依旧 可 能 会 发 生 文字 环绕 的 现象 。 
举 个 例子 ， 如 下 HTML 和 CSS: 


<div class="father"> 

<img src="zxx.jpg"> 

我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 
</div> 
<div> 虽 然 你 很 汕 ， 但 是 我 对 你 不 感 兴趣 。</div> 
.father:after { 

content: '';， 

display: table; 

clear: both,; 


} 
.father img { 
float:1left; 
width: 60px; height: 64px; 


} 
father + div { 
margin-top: -2px; 


虽然 .father 父 元 素 的 最 后 设置 了 clear :both 来 阻止 浮动 对 后 面 元 素 
的 影响 ， 但 是 最 后 结果 错位 依然 发 生 了 ， 如 图 6-17 所 示 。 


虽然 你 很 帅 ， 但 是 我 对 你 个 
感 兴 趣 。 


图 6-17clear : both 依 然 发 生 布局 错位 示意 图 


由 此 可 见 ，clear :both 只 能 在 一 定 程度 上 消除 译 动 的 影响 ， 要 想 
完美 地 去 除 序 动 元 素 的 影响 ， 还 需要 使 用 其 他 CSS 声 明 。 那 应 该 使 用 哪 
些 CSS 声 明 呢 ? 请 看 6.3 节 。 


6.3 CSS 世界 的 结 界 一 BFC 


6.3.1 BFC 的 定义 


BFC 全 称 为 block formatting context， 中 文 为 “ 块 级 格式 化 上 下 文 ”。 
相对 应 的 还 有 IFC， 也 就 是 inline formatting context， 中 文 为 “内 联 格式 化 
上 下 ”。 不 过 IFC 作 用 和 影响 比较 隐 星 ， 我 们 就 不 介绍 了 ， 我 们 将 学 习 重 
点 放 在 BFC 上 。 


关于 BFC 各 种 特性 什么 的 ， 说 起 来 很 哆 呆 ， 而 我 喜欢 用 “CSS 世 界 的 
结 界 * 这 种 称谓 概括 BFC 的 特性 。“ 结 界 * 这 个 词 大 家 应 该 都 理解 的 ， 指 通 
过 一 些 特定 的 手段 形成 的 封闭 空间 ， 里 面 的 人 出 不 去 ， 外 面 的 人 进 不 
来 ， 具有 极 强 的 防御 力 。BFC 的 特性 表现 如 出 一 办 。 


大 家 请 记 住 下 面 这 个 表现 原则 :如果 一 个 元 素 具有 BFC， 内 部 子 元 
素 再 怎么 翻 江 倒 海 、 翻 云 覆 雨 ， 都 不 会 影响 外 部 的 元 素 。 所 以 ，BFC 元 
素 是 不 可 能 发 生 margin 重 车 的 ， 因 为 margin 重 车 是 会 影响 外 面 的 元 素 
的 ;BFC 元素 也 可 以 用 来 清除 浮动 的 影响 ， 因 为 如 果 不 清除 ， 子 元 素 浮 
动 则 父 元 素 高 度 塌陷 ， 必 人 然 会 影响 后 面 元 素 布 局 和 定位 ， 这 显然 有 违 
BFC 元 素 的 子 元 素 不 会 影响 外 部 元 素 的 设 定 。 


那 什么 时 候 会 触发 BFC 呢 ?常见 的 情况 如 下 : 


<html> 根 元 素 ; 

float 的 值 不 为 none:; 

overflow 的 值 为 auto、scroll 或 hidden; 
display 的 值 为 table-cell、table-caption 和 inline- 
block 中 的 任何 一 个 ; 
position 的 值 不 为 relative 和 static。 


换言之 ， 只 要 元 素 符 合 上 面 任 意 一 个 条 件 ， 就 无 须 使 用 
clear :both 属 性 去 清除 浮动 的 影响 了 。 因 此 ， 不 要 见 到 一 个 <div> 元 
素 就 加 个 类 似 .clearfix 的 类 名 ， 否 则 只 能 暴露 你 屏 弱 的 CSS 基 本 功 。 


6.3.2 ”BFC 与 流体 布局 


BFC 的 结 界 特性 最 重要 的 用 途 其 实 不 古 去 margin 重 谷 或 者 是 清除 
float 影 响 ， 而 是 实现 更 健壮 、 更 智能 的 目 适 应 布局 。 


我 们 还 是 从 最 基本 的 文字 环 统 效 果 说 起 。 还 是 那个 小 动物 环 统 的 例 
子 : 


<div class="father"> 
<img src="me.jpg"> 


<p class="animal"> 小 猫 1， 小 猫 2，.. .</p> 
</div> 
img { float: left; } 


效果 如 图 6-18 所 示 。 此 时 .animal 的 内 容 显 然 受 到 了 设置 了 float 
属性 值 的 图 片 的 影响 而 被 环绕 了 。 此 时 如 果 我 们 给 .animal 元 素 设置 具 
有 BFC 特 性 的 属性 ， 如 overflow:hidden， 如 下 : 


,animal { overflow: hidden; } 


则 根据 BFC 的 表现 原则 ， 具 有 BFC 特 性 的 元 素 的 子 元 素 不 会 受 外 部 元 素 
影响 ， 也 不 会 影响 外 部 元 素 。 于 是 ， 这 里 的 .animal 元 素 为 了 不 和 浮动 
元 到 产生 任何 交集 ， 顺 着 浮动 边缘 形成 自己 的 封闭 上 下 文 ， 如 图 6-19 所 
示 (垂直 虚线 为 辅助 示意 )。 


小 猫 1 ， 小 猫 2 ,小 猫 3 ,小 

猫 4， 小 猫 5， 小 猫 6， 小 狗 

1 ,小 狗 2， 小 狗 3， 小 狗 4 ， 
小 狗 5 ,小 狗 6 


Wk 


图 6-18 ”文字 环绕 基本 效果 示意 


Bb 


小 猫 1， 小 猫 2， 小 猫 3 ,小 

猫 4， 小 猫 5， 小 猫 6， 小 狗 

,小 狗 2 ， 小 狗 3， 小 狗 4 ， 
子 动 过 缚 > 下痢 50 下 用 6 


图 6-19 overflow:hidden 下 的 布局 标注 


也 就 是 说 ， 普 通 流体 元 素 在 设置 了 overflow:hidden 后 ， 会 自动 
填 满 容器 中 除了 浮动 元 素 以 外 的 剩余 空间 ， 形 成 自 适 应 布局 效果 ， 而 且 
这 种 自 适 应 布局 要 比 纯 流体 自 适 应 更 加 和 养 能 。 比 方 说 ， 我 们 让 图 片 的 尺 
才 变 小 或 变 大 ， 右 侧 自 适应 内 容 无 须 更 改 任何 样式 代码 ， 都 可 以 自动 填 
满 剩 余 的 空间 。 例 如 ， 我 们 把 图 片 的 宽度 从 60px 改 成 30px， 结 果 如 图 
6-20 所 示 。 


小 猫 1 ,小 猫 2 ， 小 猫 3， 小 猫 4 ， 
小 猫 5， 小 猫 6， 小 狗 1 ， 小 狗 2 ， 
小 狗 3， 小 狗 4 ,小 狗 5， 小 狗 6 


图 6-20 ”浮动 元 素 宽 度 变 小 后 内 容 自动 完美 填充 


实际 项 目 开发 的 时 候 ， 图 片 和 文字 不 可 能 靠 这 么 近 ， 如 有 果 想 要 保持 

适 的 间距 ， 那 也 很 简单 ， 如 果 元 素 是 左 浮 动 ， 则 浮动 元 素 可 以 设置 
Ta 又 或 者 右 
侧 BFC 元 素 设 置 成 透明 border- left 或 者 padding-1Left， 但 不 包括 
margin-left， 因 为 如 果 想 要 使 用 margin-left， 则 其 值 必须 是 浮动 
元 素 的 览 度 加 间 际 的 大 小 ， 就 变 成 动态 不 可 控 的 了 ， 无 法 大 规模 复 用 。 
因此 ， 套 用 上 面 例子 的 HTIML， 假 设 我 们 希望 间隙 是 10px， 则 下 面 这 几 
种 写法 都 是 可 以 的 : 


。 img { margin-right: 10px; } 

。 img { border-right: 10px solid transparent; } 

。 img { padding-right: 10px; } 

。 .animal { border-left: 10px solid transparent; } 


。 .animal { padding-right: 1i0px; } 


一 般 而 言 ， 我 喜欢 通过 在 浮动 元 素 上 设置 margin 来 控制 间距 ， 也 
就 是 下 面 的 CSS 代 码 : 
img { 


float: left; 
margin-right: 10px; 


.animal { 


overflow: hidden,; 


} 


布局 效果 如 图 6-21 所 示 。 


小 猫 1 ,小 猫 2 ,小 猫 3 ,小 
猫 4， 小 猫 5， 小 猫 6， 小 狗 
1 ,小 狗 2 ,小 狗 3 ,小 狗 
4 ,小 狗 3 ,小 狗 6 


图 6-21 设置 合适 间距 后 的 效果 


小 猫 2 ， 


小 狂 1 ， 


小 猫 3， 小 猫 4 ,小 错 5 ,小 
猫 6， 小 狗 1， 小 狗 2， 小 狗 
3 ， 小物 4， 小 狗 3， 小 狗 6 


图 6-22 ” clear :both 导 致 自 适 应 布局 错位 示意 图 


和 基于 纯 流 体 特 性 实现 的 两 栏 或 多 栏目 适应 布局 相 比 ， 基 于 BFC 特 
性 的 目 适应 布局 有 如 下 优点 。 


(1) 自 适 应 内 容 由 于 封闭 而 更 健壮 ， 容 错 性 更 强 。 比 方 说 ， 内 部 
设置 clear :both 不 会 与 fl1oat 元 素 相互 干扰 而 导致 错位 ， 也 就 不 会 发 
生 类 似 于 图 6-22 所 示 的 问题 。 


(2) 上 自 适 应 内 容 自 动 填 满 浮动 以 外 区 域 ， 无 须 关 心 浮动 元 素 宽 
度 ， 可 以 整 站 大 规模 应 用 。 比 方 说 ， 抽 象 几 个 通用 的 布局 类 名 ， 如 : 


.left { float: left; } 
.right { float: right; } 


,bfc { overflow: hidden; } 


于 是 ， 只 要 壳 到 两 栏 结 构 ， 直 接 使 用 上 面 的 结构 类 名 就 可 以 完成 基 
本 的 布局 。HTML 示 意 如 下 : 


<div class="bfc"> 
<img src="me.jpg" class="left"> 


<p class="bfc"> 小 猎 1， 小 猫 2，.. .</p> 
</div> 


上 面 的 类 名 只 是 示意 ， 具 体 可 根据 目 己 项 目的 规范 设 定 ， 甚 至 直接 
用 .1 或 者 .r 这 样 的 极 短 命名 也 是 可 以 的 。 


而 纯 流体 布局 需要 大 小 不 确定 的 margin 或 padding 等 值 撑 开 合适 
间距 ， 无 法 CSS 组 件 化 。 例 如 ， 前 面 出 现 的 70px， 其 他 类 似 布 局 可 能 就 
是 99px， 无 法 大 规模 复 用 : 


.animal { margin-left: 7Opx; } 


两 种 不 同 原 理 的 目 适 应 布局 策略 的 高 下 一 看 便 知 。 甚 至 可 以 这 人 么 
说 ， 有 了 BFC 目 适应 布局 ， 纯 流体 特性 布局 基本 上 没有 了 存在 的 价值 。 
然而 ， 只 是 理论 上 如 此 。 如 果 BFC 目 适应 布局 真 那 么 超 能 ， 那 为 何 并 没 
有 口 口 相传 呢 ? 


那 我 们 束 得 进一步 深入 理解 了 。 


理论 上 ， 任 何 BFC 元 素 和 float 元 素 相 遇 的 时 候 ， 都 可 以 实现 目 动 
填充 的 目 适 应 布局 。 但 是 ， 由 于 绝 大 多 数 的 触发 BFC 的 属性 自身 有 一 些 
古怪 的 特性 ， 所 以 ， 实 际 操作 的 时 候 ， 能 兼顾 流体 特性 和 BFC 特 性 来 实 
现 无 敌 目 适 应 布局 的 属性 并 不 多 。 下 面 我 们 一 个 一 个 来 看 ， 每 个 CSS 属 
性 选 一 个 代表 来 进行 说 明 。 


(1) float :left。 浮 动 元素 本 身 BFC 化 ， 然 而 浮动 元 素 有 破坏 
性 和 包 右 性， 失去 了 元 素 本 身 的 流体 自 适 应 性 ， 因 此 ， 无 法 用 来 实现 自 
动 填 满 容器 的 自 适 应 布局 。 不 过 ， 其 因 兼 容 性 还 算 民 好 ， 与 搭 积木 这 种 


现实 认 知 匹 配 ， 上 手 简 单 ， 因 此 在 旧时 代 被 大 壁 使用， 也 就 是 常 说 
的 “浮动 布局 ”， 也 算 阴 差 阳 错 地 开创 了 目 己 的 一 套 布 局 。 


(2) position:absolute。 这 个 脱离 文档 流 有 些 严 重 ， 过 于 清 
高 ， 和 非 定 位 元 素 很 难 玩 到 一 块 儿 去 ， 我 就 不 说 什么 了 。 


(3) overf1low:hidden。 这 个 超 棒 ! 不 像 浮动 和 绝对 定位 ， 玩 
得 有 点 儿 过 。 其 本 身 还 是 一 个 很 普通 的 元 素 ， 因 此 ， 块 状元 素 的 流体 特 
性 保存 得 相当 完好 ， 附 上 BFC 的 独立 区 域 特性 ， 可 谓 如 虎 添 咽 、 宇 宙 无 
敌 ! 而 且 overflow:hidden 的 BFC 特 性 从 正 7 浏览 器 开始 就 支持 ， 兼 
容 性 也 很 不 错 。 唯 一 的 问题 就 是 容器 盒子 外 的 元 素 可 能 会 被 隐藏 掉 ， 一 
定 程 度 上 限制 了 这 种 特性 的 大 规模 使 用 。 不 过 ， 溢 出 隐藏 的 交互 场景 比 
例 不 算 很 高 ， 所 以 它 还 是 可 以 作为 常用 BFC 布 局 属性 使 用 的 。 


(4) display:inline-block。 这 是 CSS 世 界 最 伟大 的 声明 之 
一 ， 但 是 用 在 这 里 ， 就 有 些 捉襟见肘 了 。display:inline-b1lock 会 
让 元 素 尺 才 包 庄 收 缩 ， 完 全 残 不 是 我 们 想 要 的 block 水 平 的 流动 特性 。 
只 能 是 一 声 叹 妃 舍 弃 控 ! 人 然而， 峰回路转 ， 世 事 难 料 。 大 家 应 该 知道 ， 
IE6 和 IE7 浏 览 器 下 ，block 水 平 的 元 素 设 置 display:inline-block 
元 素 还 是 block 水 平 ， 也 就 是 还 是 会 目 适 应 容 需 的 可 用 宽度 显示 。 于 
是 ， 对 于 下 6 和 正 7 浏 贤 硕 ， 我 们 会 阴 差 阳 错 得 到 一 个 比 
overflow:hidden 更 强大 的 声明 ， 既 BFC 特 性 加 里 ， 又 流体 特性 保 


留 。 


.float-left { 
float: left,; 


} 
.bfc-content { 


display: inline-block; 
} 


当然 ，*zoom:1 也 是 类 似 效果 ， 不 过 只 适用 于 低级 的 下 浏 蜗 絮 ， 如 
IE7 ° 


(5) display:table-cell。 WA 
IE8 及 以 上 版 本 浏览 器 才 支 持 。 跟 display:inline-block 一 样 ， 
会 跟随 内 部 元 素 的 宽度 显示 ， 看 样子 也 是 不 合适 的 命 。 但 是 ， ga 
一 个 非常 神奇 的 特性 ， 就 是 宽度 值 设置 得 再 大 ， 实 际 宽度 也 不 会 超过 表 
格 容器 的 宽度 。 第 3 章 单元 格 一 柱 擎 天 的 例子 利用 的 就 是 这 种 特性 ， 如 
图 6-23 所 示 。 


当 父 级 relative , 且 | 当 父 级 relative , 且 
完 度 很 小 的 时 候 , 例 | 宽度 很 小 的 时 候 ， 例 


Ne i i A el ee i es 


图 6-23 单元 格 


如 
{position:relative; 
width:20px;} ， 
absolute 元 素 也 会 
出 现 一 柱 擎 天 的 情 
况 ; 


如 
{position:relative; 
width:20px:} ， 
absolute 元 素 也 会 
出 现 一 柱 擎 天 的 情 
况 ， 


的 一 柱 擎 天 效果 


因此 ， 如 果 我 们 把 display :table-cell 这 个 BFC 元 素 宽 度 设 置 


得 很 大 ， 比 方 说 3000px， 那 其 


实 就 跟 block 水 平 元 素 自 动 适应 容器 空 


间 效果 一 模 一 样 了 ， 除 非 你 的 容 郁 宽度 超过 3000px。 实 际 上 ， 一 般 


Web 页 面 不 会 有 3000px 宽 的 模块 ， 所 以 ， 要 是 实在 不 放心 ， 设 个 
9999px 好 了 ! 


.float-left { 
float: left,; 


} 
,bfc-content { 
display: table-cell; width: 9999px; 


看 上 去 好 像 还 不 错 。 但 是 ， 还 是 有 两 点 制约 ， 一 是 需要 IE8 及 以 上 
版 本 的 浏览 器 ;二 是 应 付 连 续 英 文字 符 换行 有 些 吃力 。 但 是 ， 总 体 来 
看 ， 其 适用 的 场景 要 比 overflow:hidden 更 为 广泛 。 


(6) display:table-row。 对 width 无 感 ， 无 法 自 适 应 剩余 容 
器 空间 。 


(7) display:table-caption。 此 属性 一 无 是 处 。 


还 有 其 他 声明 对 这 里 的 目 适应 布局 效果 而 言 也 都 是 一 无 是 处 ， 束 不 
全 部 展开 了 。 


总 结 一 下 ， 我 们 对 BFC 声 明 家 族 大 致 过 了 一 过 ， 能 担任 目 适 应 布局 
重任 的 也 殉 是 以 下 几 个 。 


。 overflow:auto/hidden， 适 用 于 IE7 及 以 上 版 本 浏览 器 ; 
。display:inline-block， 适 用 于 IE6 和 和 IE7; 
。display:table-cell， 适 用 于 IE8 及 以 上 版 本 浏览 器 。 


最 后 ， 我 们 可 以 提炼 出 两 套 IE7 及 以 上 版 本 浏览 器 适 配 的 自 适 应 解 
决 方案 。 


(1) 借助 overflow 属 性 ， 如 下 : 


.lbf-content { overflow: hidden; } 


(2) 融合 display:table-cell 和 display:inline- 
block， 如 下 : 


.1bf-content { 
display: table-cell; width: 9999px; 


/* 如 果 不 需要 兼容 IE7， 下 面 样式 可 以 省 略 */ 


*display: inline-block; *width: auto 


这 两 种 基于 BFC 的 目 适 应 方案 均 文 持 无 限 娩 套 ， 因 此 ， 多 栏目 适应 
可 以 通过 向 套 方式 实现 。 这 两 种 方案 均 有 一 点 人 不足， 前 者 如 果子 元 素 要 
定位 到 父 元 素 的 外 面 可 能 会 被 隐藏 ， 后 者 无 法 直接 让 连续 英文 字符 换 
行 。 所 以 ， 大 家 可 以 根据 实际 的 项 目 场景 选择 合适 的 技术 方案 。 


最 后 ， 关 于 display:table-cell 元 素 内 连续 英文 字符 无 法 换行 
的 问题 ， 事 实 上 是 可 以 解决 的 ， 束 是 使 用 类 似 下 面 的 CSS 代 码 : 
.word-break { 


display: table; 
width: 100%,; 


table-layout: fixed; 
word-break: break-all; 


6.4 ”最 佳 结 界 overflow 


要 想 彻底 清除 浮动 的 影响 ， 最 适合 的 属性 不 是 clear 而 是 
overflow。 一般 使 用 overflow:hidden， 利 用 BFC 的 “ 结 界 ”特性 彻 
底 解 决 浮动 对 外 部 或 兄弟 元 素 的 影响 。 虽 然 有 很 多 其 他 CSS 声 明 也 能 清 


除 浮 动 ， 但 基本 上 都 会 让 元 素 的 宽度 表现 为 " 包 右 性 ”， 也 吕 是 会 影响 原 
来 的 样式 布局 ， 而 overflow:hidden 声 明 不 会 影响 元 素 原先 的 流体 特 
性 或 宽度 表现 ， 因 此 在 我 看 来 是 最 佳 “ 结 界 ”。 


不 过 话 义 说 回来 ，overflow 属 性 原本 的 作用 指定 了 块 容器 元 素 的 
内 容 洲 出 时 古 否 需要 裁剪 ， 也 就 是 “ 结 界 ” 只 是 其 入 生出 来 的 特性 ，“ 苹 
裁 ? 才 是 其 本 职工 作 。 


6.4.1 overf1low 前 裁 界 线 border box 


一 个 设置 了 overflow:hidden 声 明 的 元 素 ， 假 设 同时 存在 
border 属 性 和 padding 必 性， 类似 于 下 面 的 CSS 代 码 : 
,box 1 


width: 200px; height: 80px; 
padding: 10px; 


border: 10px solid; 
overflow: hidden,; 


则 当 子 元 素 内 容 超 出 容器 宽度 高 度 限 制 的 时 候 ， 剪 裁 的 边界 是 border 
box 的 内 边缘 ， 而 非 padding box 的 内 边 绿 ， 如 图 6-24 所 示 。 有 眼见 为 实 ， 
手动 输入 http://demo.cssworld.cn/6/4-1.php 或 者 扫 下 面 的 二 维 码 。 


图 6-24 元素 剪裁 与 border 内 边缘 


如 果 想 实现 元 素 藤 裁 同时 四 周 留 有 间 际 的 效果 的 话 ， 可 以 斌 试 使 用 
透明 边框 ， 此 时 内 间距 padding 属 性 是 无 能 为 力 的 。 这 里 举 这 个 实例 并 
不 只 是 为 了 传授 这 个 小 技能 ， 也 是 为 了 以 此 为 契机 ， 深 入 探讨 一 下 
overf1]1ow 属 性 的 一 个 很 经 典 的 不 兼容 问题 ， 即 Chrome 浏 览 右 下 ， 如 采 
容器 可 滚动 〈 假 设 是 垂直 滚动 ) ， 则 padding-bottom 也 算 在 滚动 尺 
寸 之 内 ，I 玉 和 Firefox 浏 览 絮 忽略 padding-bottom。 例 如 ， 上 面 
的 .box， 我 们 把 overflow 属 性 值 改 成 auto ( 亦 可 点 击 实例 页 面 图 
片 ) ， 深 动 到 底部 会 发 现 ，Chrome 浏 览 器 下 面 是 有 10 像 素 的 空白 的 ， 如 
图 6-25 所 示 。Firefox 和 IE 却 没有 ，Firefox 浏 览 器 呈现 的 效果 如 图 6-26 所 


图 6-25 “Chrome 浏览 器 滚动 高 度 包 含 padding-bottom 


图 6-26 ”Firefox 浏 览 器 滚动 高 度 不 包含 padding-bottom 


曾经 有 人 写 邮 件 和 我 交流 过 这 个 问题 ， 认 为 Chrome 浏 贤 需 的 解析 是 
正确 的 ， 正 和 Firefox 浏 览 恬 则 是 不 准确 的 。 在 我 看 来 ，Chrome 浏 虎 器 的 
解析 反而 是 不 准确 的 ， 只 是 Chrome 浏 唤 器 的 泻 染 表现 是 我 们 开发 所 需要 
的 ， 我 们 就 会 偏心 地 认为 Chrome 是 正确 的 。 但 是 ， 正 如 一 开始 的 例子 所 
展示 的 ，overflow 的 剪裁 或 者 滚动 的 边界 是 border box 的 内 边缘 ， 而 非 
padding box 的 内 边缘 ， 因 此 ， 忽 略 padding-bottom 才 是 符合 解析 规 
则 的 泻 染 行为 。 


但 是 事 已 至 此 ， 和 争辩 到 底 谁 对 谁 错 其 实 并 没有 多 大 的 意义 ， 重 要 的 
是 我 们 知道 了 这 种 不 兼容 性 ， 所 以 我 们 在 实际 项 目 开发 的 时 候 ， 要 尽量 
避免 滚动 容器 设置 padding-bottom 值 ， 除 了 样式 表现 不 一 致 外 ， 还 
会 导致 scrollHeight 值 不 一 样 ， 这 往往 会 给 开发 带 来 难以 察觉 的 奔 
烦 ， 需 要 引起 注意 。 


6.4.2 了 解 0overflow-x 和 overflow-y 


自 丰 8 以 上 版 本 的 浏览 器 开始 ，overflow 属 性 家 族 增加 了 两 个 属 
性 ， 就 是 这 里 的 overflow-x 和 overflow-y， 分 别 表示 单独 控制 水 平 
或 垂直 方向 上 的 剪裁 规则 。 


支持 的 属性 值 和 overflow 属 性 一 模 一 样 。 


。Visible: 默认 值 。 

。hidden: 剪裁。 

。 scroll: 滚动 条 区 域 一 直 在 。 

。 auto: 不 足以 访 动 时 没有 滚动 条 ， 可 以 滚动 时 滚动 条 出 现 。 


这 种 相似 性 很 容易 让 大 家 产生 一 个 误区 ， 认 为 只 要 overflow-x 和 和 
overflow-y 设 置 了 上 面 的 属性 值 ， 就 一 定 会 是 这 样 的 表现 ， 实 际 上 
overflow-x 和 overflow-y 的 表现 规则 要 比 看 上 去 复杂 些 :， 如 果 
overflow-x 和 overflow-y 属 性 中 的 一 个 值 设置 为 visible 而 男 外 一 
个 设置 为 sScroll1、auto 或 hidden， 则 visible 的 样式 表现 会 如 同 
auto。 也 就 是 说 ， 除 非 overflow-x 和 overflow-y 的 属性 值 都 是 
visible， 否 则 visible 会 当成 auto 来 解析 。 换 名 话说， 永远 不 可 能 
实现 一 个 方向 溢出 剪裁 或 滚动 ， 另 一 方 各 内容 溢出 显示 的 效果 。 


因此 ， 下 面 CSS 代 码 中 的 overflow-y:auto 是 多 余 的 : 


html { 
overflow-x: hidden; 


overflow-y: auto; /* 多 余 */ 


但 是 ，scroll、auto 和 hidden 这 3 个 属性 值 是 可 以 共存 的 。 


6.4.3 _ overflow 与 滚动 条 


HTML 中 有 两 个 标签 是 默认 可 以 产生 滚动 条 的 ， 一 个 是 根 元 素 
<htm1>， 另 一 个 是 文本 域 <textarea>。 之 所 以 可 以 出 现 滚动 条 ， 是 
因为 这 两 个 标签 默认 的 overflow 属 性 值 不 是 visible， 从 IE8 浏 览 咒 
开始 ， 都 使 用 auto 作 为 默认 的 属性 值 。 这 也 就 意味 着 ， 从 IE8 浏 览 器 开 
始 ， 默 认 状 态 下 是 没有 滚动 栏 的 ， 尺 寸 溢出 才 会 出 现 ， 对 于 I 下 7 浏览 
器 ， 其 样式 表现 就 好 像 设置 了 overflow-y:scroll 一 般 。 


关于 浏览 锅 的 滚动 条 ， 有 以 下 几 个 小 而 美的 结论 。 


(1) 在 PC 端 ， 无 论 是 什么 浏览 器 ， 默 认 滚动 条 均 来 自 <html>， 
而 不 是 <body> 标 签 。 验 证 很 简单 ， 新 建 一 个 空 日 页 面 ， 此 时 <body> 标 
签 的 默认 margin 值 是 .5em， 如 果 滚 动 条 是 由 <body> 标 签 产 生 的 ， 那 
么 效果 应 该 如 图 6-27 所 示 这 般 边 绿 留 有 间 际 。 但 是 最 后 实现 结果 却 是 图 
6-28 所 示 的 这 样 没 有 间 际 。 


图 6-27 ”<body> 产 生 滚动 条 的 假想 效果 


图 6-28 ”实际 效果 无 间 除 ， 滚 动 条 由 <htm1> 产 生 


下 


所 以 ， 如 采 我 们 想 要 去 除 页 面 默 认 滚 动 条 ， 只 需要 : 


而 没 必要 把 <body> 也 拉 下 水 : 


html,Bety { overflow: hidden; } 


注意 ， 上 壕 规 则 只 对 PC 端 有 效 ， 对 于 移动 端 并 不 一 定 适 用 。 例 如 ， 
在 PC 端 ， 对 <htm1> 标 签 设 置 overflow:hidden 可 以 隐藏 滚动 条 禁止 
滚动 ， 但 是 在 移动 端 基 本 上 无 效 。 在 PC 端 ， 窗 体 滚 动 高 度 可 以 使 用 
document .documentE1Lement scrollTop 获取 ， 但 是 在 移动 端 ， 
可 能 就 要 使 用 document .body.scrollTop 获 取 。 


(2) 滚动 条 会 占用 容器 的 可 用 宽度 或 高 度 。 假 设 一 个 元 素 的 宽度 
是 400px，CSS 代 码 如 下 : 


.box 1 
width: 400px; height: 100px; 


overflow: auto;,; 


当 子 元 素 高 度 超过 100px 出 现 滚动 条 的 时 候 ， 子 元 素 可 用 的 实际 宽度 实 
际 上 要 小 于 400px， 因 为 滚动 条 〈 谁 确 地 说 应 该 是 滚动 栏 ) 占据 了 一 定 
的 宽度 。 当 然 这 还 要 看 操作 系统 ， 比 方 说 在 移动 端 就 不 会 有 这 样 的 问 
题 ， 因 为 移动 端的 屏幕 尺寸 本 身 就 有 限 ， 滚 动 条 一 般 都 是 巧 浮 模式 ， 不 
会 占据 可 用 宽度 ， 但 是 在 PC 端 ， 尤 其 windows 操 作 系统 下 ， 几 乎 所 有 浏 
览 器 的 滚动 栏 都 会 占据 宽度 ， 而 目 这 个 宽度 大 小 是 固定 的 。 我 通过 在 
Windows 7 系统 下 的 测试 和 对 比 发 现 ，IE7 及 以 上 版 本 IE、Chrome、 
Firefox 浏 览 器 深 动 栏 所 占据 的 宽度 均 是 17px， 注 意 ， 很 精准 的 是 
17px， 我 不 知道 网 上 那些 误 人 子弟 的 20px、14px 是 从 哪里 来 的 。 当 
然 ， 随 着 以 后 操作 系统 的 升级 ， 滚 动 栏 的 宽度 发 生变 化 也 是 有 可 能 的 。 


要 知道 目 己 浏览 器 的 深 动 栏 宽度 是 多 少 其 实 很 镜 单 ， 代 码 如 下 : 


.box { width: 400px; overflow: scroll; } 
<div class="box"> 


<div id="in" class="in"></div> 
</div> 
console.1og(400 - document.getElementById("in").clientWwidth); 


这 种 滚动 栏 占 据 宽度 的 特性 有 时 候 会 给 我 们 的 布局 带 来 不 小 的 麻 
烦 。 比 方 说 ， 布 局 直接 错位 ， 如 宽度 设 定 死 的 浮动 布局 ， 又 或 者 布局 不 
对 齐 ， 如 我 们 希望 实现 一 个 表格 头 固 定 、 表 格 主体 可 以 滚动 的 效果 ， 稼 
见 的 实现 方法 是 使 用 双 <table>， 表 格 头 是 一 个 独立 的 <table>， 主 
体 也 是 一 个 独立 的 <table> 元 素 ， 放 在 一 个 overflow:auto 的 <div> 
元 素 中 ， 这 种 实现 ， 如 果 滚 动 条 不 出 现 还 好 ， 两 个 表格 的 表格 列 可 以 完 
美 对 齐 ， 但 是 一 旦 滚动 条 出 现 ， 主 题 表 格 可 用 宽度 被 压缩 ， 表 格 列 往往 
就 无 法 完美 对 和 齐 了 。 


常用 的 解决 方法 有 下 面 两 种 : 一 种 是 <tab1le> 元 素 使 用 固定 的 宽度 
值 ， 但 是 距离 右 侧 留 17px 的 间 际 ， 这 样 即使 滚动 条 出 现 ， 也 不 会 产 
生 任 何 的 宽度 影响 ， 另 一 种 就 是 表格 的 最 后 一 列 不 设 定 宽度 (文字 最 好 
左 对 齐 ) ， 前 面 每 一 列 都 定 死 宽度 ， 这 样 最 后 一 列 就 是 自 适应 结构 ， 就 
算 滚动 条 出 现 ， 也 只 是 自身 有 一 些 宽度 变 小 ， 对 整体 对 齐 并 无 多 大 影 
啊 。 


然而 ， 滚 动 栏 占据 宽度 的 特性 最 大 的 问题 就 是 页 面 加 载 的 时 候 水 平 
大 中 的 布局 可 能 会 产生 晃动 ， 因 为 窗 体 默认 古 没 有 深 动 条 的 ， 而 HTML 
内 容 是 目 上 而 下 加 载 的 ， 就 会 发 生 一 开始 没有 滚动 条 ， 后 来 突然 出 现 深 
动 条 的 情况 ， 此 时 页 面 的 可 用 宽度 发 生变 化 ， 水 平 居中 重新 计算 ， 导 致 
页 面 发 生 晃动 ， 这 个 体验 是 非常 不 好 的 。 比 较 简 单 的 做 法 是 设置 如 下 
CSS: 


html { 
overflow-y: scroll; 
} 


如 果 页 面 注定 会 很 高 ， 这 种 做 法 也 是 可 以 接受 的 ， 但 是 如 果 是 404 
页 面 这 种 不 足 一 屏 高 度 的 页 面 ， 右 侧 也 依然 有 个 滚动 栏 ， 那 束 有 种 回 到 
解放 前 的 感觉 了 。 


这 里 分 享 一 个 可 以 让 页 面 深 动 条 不 发 生 晃动 的 小 技巧 ， 即 使 用 如 下 
CSS 代 码 : 


html { 
overflow-y: scroll; /* for IE8 */ 


:root { 
overflow-y: auto; 
overflow-x: hidden; 


:root body { 
position: absolute; 


} 

body { 
width: 100vw; 
overflow: hidden,; 


基本 上 药 到 病 除 ， 而 且 后 遗 症 非 常 少 ， 大 家 不 妨 试 试 ! 


深 动 条 是 可 以 目 定 义 的 。 因 为 三 浏 唤 絮 的 目 定 义 效果 实在 是 比 原生 
的 还 要 难看 ， 就 不 浪费 大 家 时 间 了 ， 束 此 打住 。 


倒是 文 持 -webkit- 前 级 的 浏览 絮 可 以 说 说 。 例 如 ， 对 于 Chrome 浏 


多 能 : 


。 整体 部 分 ，: : -webkit-scrollbar:; 

。 两 端 按钮 ，: : -webkit-scrollbar-button; 

。 外 层 轨道 ，: : -webkit-scrollbar-track; 

。 内 层 轨道 ，: : -webkit-scrollbar-track-piece; 
。 滚动 滑 块 ，: : -webkit-scrollbar -thumb; 

。 边 角 ，: :-webkit-scrollbar-corner。 


但 是 我 们 平时 开发 中 只 用 下 面 3 个 属性 : 


::-webkit-scrollbar { /* 血 柳 宽 度 */ 
width: 8px; height: 8px; 


::-webkit-scrollbar-thumb { /* 拖 动 条 */ 
background-color: rgba(0,0,0,，,.3) ; 
border-radius: 6px; 


::-webkit-scrollbar-track 1{ 
background-color: #ddd; 
border-radius: 6px; 


} 


在 目标 浏览 絮 下 的 深 动 条 效果 忠 会 如 图 6-29 所 示 这 般 。 


图 6-29” 自 定义 滚动 条 效果 示意 


6.4.4 ”依赖 overflow 的 样式 表现 


在 CSS 世 界 中 ， 很 多 属性 要 想 生 效 都 必须 要 有 其 他 CSS 属 性 配合 ， 
其 中 有 一 种 效果 就 离 不 开 overflow:hidden 声 明 ， 即 单行 文字 溢出 点 
点 点 效果 。 虽 然 效 果 的 核心 是 text- overflow:ellipsis， 效 果实 
现 必需 的 3 个 声明 如 下 : 


,el1 { 
text-overflow: ellipsis; 
white-space: nowrap ; 


overflow: hidden,; 


这 3 个 声明 缺 一 不 可 。 


目前 ， 对 -webkit- 私 有 前 绥 文 持 恨 好 的 浏 斋 右 还 可 以 实现 多 行文 
字 打 点 效果 ， 但 是 却 无 须 依赖 overflow:hidden。 比 方 说 ， 最 多 显示 
2 行内 容 ， 再 多 就 打点 的 核心 CSS 代 码 如 下 : 
.ell-rows-2 { 

display: -webkit-box; 


-webkit-box-orient: vertical; 
-webkit-line-clamp: 2; 


} 


6.4.5 overflow 与 锚 点 定位 


销 点 ， 通 俗 点 的 解释 就 是 可 以 让 页 面 定 位 到 某 个 位 置 的 点 。 其 在 高 
度 较 高 的 页 面 中 经 常见 到 ， 如 百度 百科 页 面 中 标题 条 目的 快速 定位 效 
果 ， 如 图 6-30 所 示 。 点 击 其 中 任意 一 个 标题 链接 ， 比 如 说 “发 展 历程 ”， 
页 面 就 会 快速 定位 到 “发 展 历 程 ” 这 一 块 内 容 ， 同 时 地 址 栏 中 的 URL 地 址 
最 后 多 了 一 个 #1， 如 图 6-31 所 示 。 
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图 6-30 ”百科 中 的 目录 标题 链接 条 目 


nm CIO /item/CSS/54 5€) 
由 发 展 历程 


图 6-31 ”定位 效果 与 URL 地 址 变化 


我 所 知道 的 基于 URL 地 址 的 锁链 (如 上 面 的 #1， 可 以 使 用 
location .hash 获 取 ) 实现 销 点 跳 转 的 方法 有 两 种 ， 一 种 是 <a> 标 签 
以 及 name 属 性 ， 还 有 一 种 就 是 使 用 标签 的 id 属性 。 百 度 百 科 就 是 使 用 
<a> 标 签 的 name 属 性 实现 锚 点 跳 转 的 ， 其 代码 如 图 6-32 所 示 。 


Y<div class="anchor-1ist 
[a name="1"] class lemma-anchor para-title /a 
a name="sub5236733_1"” class="lemma-anchor /a 
a name=" 发 展 历 程 ”class="lemma-anchor /a 
/div 


图 6-32 ”使 用 <a> 标 签 以 及 name 值 实现 销 点 定位 


使 用 更 精练 的 代码 表示 束 是 : 


<a href="#1"> 发 展 历程 ></a> 


<a Name="1"></a> 


忠 我 个 人 而 言 ， 我 更 喜欢 使 用 下 面 的 做 法 ， 也 束 是 利用 标签 的 jd 属 
性 ， 因 为 HTML 会 显得 更 干净 一 些 ， 也 不 存在 任何 兼容 性 问题 : 


<a href="#1"> 发 展 历 程 ></a> 


<h2 id="1"> 发 展 历 程 </h2> 


下 面 思考 这 两 个 问题 ， 销 点 定位 行为 是 基于 什么 条 件 触发 的 ? 销 点 
定位 作用 的 发 生 本 质 上 是 什么 在 起 作用 ? 


1. 锚 点 定位 行为 的 触发 条 件 
下 面 两 种 情况 可 以 触发 销 点 定位 行为 的 发 生 : 


(1) URL 地 址 中 的 销 链 与 销 点 元 素 对 应 并 有 交互 行为 ; 
(2) 可 focus 的 销 点 元 素 处 于 focus 状 态 。 


上 面 百度 百科 的 例子 就 是 基于 URL 地 址 的 锚 链 与 锚 点 实现 的 ， 定 位 
效果 的 发 生 需 要 行为 触发 。 比方 说 ， 点 击 一 个 链接 ， 改 变 地 址 栏 的 销 链 
值 ， 或 者 新 打开 一 个 链接 ， 后 面 融 有 一 个 锁链 值 ， 当 然 前 提 是 这 个 锁链 
值 可 以 找到 页 面 中 对 应 的 元 素 ， 并 且 是 非 隐藏 状态 ， 否 则 不 会 有 任何 的 
定位 行为 发 生 。 如 果 我 们 的 销 链 就 是 一 个 很 简单 的 #， 则 定位 行为 发 生 
的 时 候 ， 页 面 是 定位 到 顶部 的 ， 所 以 我 们 一 般 实现 返回 顶部 效果 都 是 使 
用 这 样 的 HTML: 


<a href="#"> 返 回 顶 部 ></a> 


然后 配合 JavaScript 实 现 一 些 动 效 或 者 避免 点 击 时 候 URL 地 址 出 现 #， 而 
很 多 人 实现 返回 顶部 效果 的 时 候 使 用 的 是 类 似 下 面 的 HTML: 


<a href="javascript:"> 返 回 顶部 ></a> 


然后 使 用 JavaScript 实 现 定位 或 者 加 一 些 平 滑动 效 之 类 。 显 然 我 是 推荐 上 
面 那 种 做 法 的 ， 因 为 销 点 定位 行为 的 发 生 是 不 需要 依赖 JavaScript 的 ， 所 
以 即使 页 面 JavaScript 代 码 失 效 或 者 加 载 缓 慢 ， 也 不 会 影响 正 稼 的 功能 体 
验 ， 也 就 是 用 户 无 论 在 什么 状态 下 都 能 准确 地 返回 顶部 。 


“focus 锁 点 定位 ” 指 的 是 类 似 链 接 或 者 按钮 、 输 入 框 等 可 以 被 
focus 的 元 素 在 被 focus 时 发 生 的 页 面 重 定位 现象 。 


举 个 很 人 镜 单 的 例子 ， 在 PC 端 ， 我 们 使 用 Tab 快 速 定 位 可 focus 的 元 
素 的 时 候 ， 如 采 我 们 的 元 素 正 好 在 屏幕 之 外 ， 浏 咒 器 束 会 目 动 重 定位 ， 
将 这 个 屏幕 之 外 的 元 素 定位 到 屏幕 之 中 。 再 举 一 个 例子 ， 一 个 可 读 写 的 
<input> 输 入 框 在 屏 问 之 外 ， 则 执行 类 似 下 面 的 JavaScript 代 码 的 时 
候 : 


document .querySelector('input').focus(); 


这 个 输入 框 会 自动 定位 在 屏幕 之 中 ， 这 些 就 是 “focus 销 点 定位 ”。 


同样 ，“focus 销 点 定位 ”也 不 依赖 于 JavaScript， 是 浏览 器 内 置 的 无 
障碍 访问 行为 ， 并 且 所 有 浏览 器 都 是 如 此 。 


里 然 都 是 销 点 定位 ， 但 是 这 两 种 定位 方法 的 行为 表现 还 是 有 差异 
的 ，“URL 地 址 销 链 定位 ”是 让 元 素 定位 在 浏览 絮 窗 体 的 上 边缘 ， 
而 “focus 销 点 定位 ” 古 让 元 素 在 浏览 右 窗 体 范 围 内 显示 即 可 ， 不 一 定 是 
在 上 边缘 。 


2. 销 点 定位 作用 的 本 质 


锁 点 定位 行为 的 发 生 ， 本 质 上 是 通过 改变 容 需 滚动 高 度 或 者 宽度 来 
实现 的 。 由 于 平时 大 多 数 页 面 都 是 垂直 深 动 ， 且 水 平 深 动 与 之 类 似 ， 
此 接 下 来 的 内 容 我 都 是 以 垂直 滚动 示意 。 


注意 ， 这 里 说 的 是 容 右 的 滚动 高 度 ， 而 不 十 浏览 器 的 深 动 高 度 ， 这 
一 点 小 小 区 分 非常 重要 。 没 错 ， 非 常 重要 。 由 于 我 们 平常 接触 销 点 定位 
都 是 浏览 器 窗 体 滚动 条 级 别 的 ， 因 此 很 容易 被 一 些 表 象 迷 惑 而 产生 一 些 
错误 的 认识 。 


首先 ， 销 点 定位 也 可 以 发 生 在 普通 的 容器 元 素 上 ， 而 且 定 位 行为 的 
发 生 是 由 内 而 外 的 。 什 么 意思 呢 ? 例如， 我 们 的 页 面 上 有 一 个 <div> 元 
素 设置 了 overf1low:auto， 且 子 元 素 高 度 超出 其 自身 高 度 限 制 ， 代 码 
示意 CSS 和 HTML 如 下 : 


.box 1 
height: 120px; 
border: 1px solid #bbb; 
overflow: auto; 


.Content { 
height: 200px; 
background-color: #eee,; 


<div class="box"> 
<div class="content"></div> 
<h4 id="title"> 底 部 标题 </h4> 


</div> 
<p><a href="#title"> 点 击 测试 </a></p> 


由 于 .content 元 素 高 度 超 过 .box 容器， 因此 <h4> 元 素 必 然 不 可 
见 ， 如 图 6-33 所 示 。 然 后 ， 我 们 点 击 下 面 的 “点 击 测试 链接 ， 则 滚动 条 
位 置 变化 (实际 上 改变 了 scrollTop 值 ) ,“ 底 部 标题 "自动 出 现 了 ， 
如 图 6-34 所 示 。 


图 6-33 ”标题 不 可 见 示意 


底部 标题 


图 6-34 ”标题 可 见 示意 


“由 内 而 外 ” 指 的 是 ， 普 通 元 素 和 窗 体 同 时 可 滚动 的 时 候 ， 会 由 内 而 
外 触发 所 有 可 滚动 窗 体 的 销 点 定位 行为 。 继 续 上 面 的 例子 ,假设 我 们 的 
浏览 絮 窗 体 也 是 可 深 动 的 ， 则 点 击 “ 点 击 测试 "链接 后 ,，“ 奔 部 标题 " 先 触 
发 .box 容 右 的 销 点 定位 ， 也 就 是 深 动 到 底部 ， 然 后 再 触发 窗 体 的 销 点 
定位 ,“ 改 部 标题 "和 浏览 右 窗 口 的 上 边 如 对 并 ， 如 图 6.35 所 示 (图 中 最 
上 方 一 条 线束 是 浏览 右 窗 体 上 边缘 ) 。 


底部 标题 


点 击 测 试 


图 6-35 ”标题 可 见 触发 两 个 可 滚动 容器 锚 点 定位 示意 


其 次 就 是 设置 了 overflow:hidden 的 元 素 也 是 可 滚动 的 ， 这 也 是 
本 小 节 的 核心 。 说 得 更 干脆 点 儿 就 是 : overflow:hidden 跟 
overflow:auto 和 overflow: scrol1 的 差别 就 在 于 有 没有 那个 滚动 
条 。 元 素 设置 了 overf1low:hidden 声 明 ， 里 面 内 容 高 度 溢出 的 时 候 ， 
滚动 依然 存在 ， 仅 仅 滚 动 条 不 存在 ! 


有 人 肯定 会 反驳 : 不 会 呀 ， 元 素 设 置 了 overflow:hidden， 同 时 
高 度 溢 出 ， 我 的 鼠标 无 论 怎么 滚 ， 都 没有 次 动 行为 发 生 啊 ! 


对 ， 你 说 的 那 是 表现 ， 表 面 看 起 来 确实 是 那样 ， 但 是 如 果 发 生 锚 点 
定位 ， 你 就 会 发 现 深 动 改 生 了 。 还 是 上 面 的 例子 ， 假 设 ,box 元 素 的 CSS 
变 成 下 面 这 样 ，overflow 属 性 值 不 是 auto， 而 是 hidden: 


.box 1 
height: 120px; 


border: 1px solid #bbb; 
overflow: hidden,; 


我 们 点 击 下 面 的 “点 击 测试 ”链接 时 ， 标 题 同样 发 生 了 重 定 位 ， 如 图 
6-36 所 示 。 


底部 标题 


占 十 测试 


图 6-36 ” overflow:hidden 依 然 锚 点 重 定 位 


销 点 定位 本 质 上 是 改变 了 scrollTop 或 scrollLeft 值 ， 因 此 ， 
上 面 的 定位 效果 等 同 于 执行 了 下 面 的 JavaScript 代 码 : 


document ,querySelector(' .box').scrollTop = 200;  // 随便 一 个 足够 大 的 值 


即 可 


什么 ? 浏览 器 的 销 点 定位 实现 了 类 似 JavaScript 的 效果 ? 那 已 不 是 我 
们 可 以 利用 这 种 兼容 的 浏 蜗 器 行为 实现 更 复杂 的 无 JavaScript 的 交互 效 
果 ? 例如 ， 实 现 选 项 卡 切换 效果 ， 手 动 输入 http://demo.cssworld.cn/6/4- 
2.php 或 者 扫 下 面 的 二 维 码 。 这 个 示例 是 基于 URL 地 址 的 销 链 触发 销 点 定 
位 实现 的 选项 卡 切换 效果 。 例 如 ， 点 击 切换 按钮 3， 效 有 果 如 图 6-37 所 
示 。 
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图 6-37 ”选项 卡 3 选 中 效果 


HTML 和 核心 CSS 代 码 如 下 : 


<div class="box"> 
<div class="list" id="one">1</div> 
<div class="]1ist" id="two">2</div> 
<div class="list" id="three">3</div> 
<div class="list" id="four">4</div> 
</div> 
<div class="link"> 
<a href="#one">1</a> 
<a href="#two">2</a> 
<a href="#three">3</a> 
<a href="#four">4</a> 
</div> 
.box 1 
height: 1i0em; 
border: 1px solid #ddd; 
overflow: hidden; 


} 

.list { 
line-height: 1i0em; 
background: #ddd; 


容器 设置 了 overf1low:hidden， 且 每 个 列表 高 度 和 容器 的 高 度 一 
样 高 ， 这 样 保证 永远 只 显示 一 个 列表 。 当 我 们 点 击 按钮 ， 如 第 三 个 按 
钮 ， 会 改变 URL 地 址 的 销 链 为 #three， 从 而 触发 jd 为 three 的 第 三 个 
列表 发 生 的 销 点 定位 ， 也 就 是 改变 容器 深 动 高 度 让 列表 3 的 上 边缘 和 深 


动容 名 上 边缘 对 齐 ， 从 而 实现 选项 卡 效 果 。 我 自己 画 了 个 简单 的 原理 
图 ， 如 图 6-38 所 示 。 


Qa 被 共 hree 锚 定 


\ @ 改变 滚动 高 度 
2 触 友 锚 点 定位 


图 6-38” 锚 点 定位 实现 选项 卡 原 理 示意 


此 效果 乍 一 看 很 酷 ， 但 却 有 不 少 不 足 之 处 : 其 一 ， 容 顺 高 度 需要 回 
定 ; 其 二 ， 也 是 最 麻烦 的 ， 束 是 "由 内 而 外 ”的 锁 点 定位 会 触发 窗 体 的 重 
定位 ， 也 融和 是 说 ， 如 采 页 面 也 是 可 以 滚动 的 ， 则 点 击 选项 卡 按钮 后 页 面 
会 发 生 跳动 ， 这 种 体验 显然 是 非常 不 好 的 。 那 有 没有 什么 解决 办 法 呢 ? 


有 ， 还 记 不 记得 前 面 提 过 有 两 种 方法 可 以 触发 销 点 定位 ， 其 中 有 一 
种 方法 就 是 “focus 销 点 定位 ”"， 只 要 定位 的 元 素 在 浏 哎 器 窗 体 中 ， 束 不 
会 触发 窗 体 的 滚动 ， 也 束 是 选项 卡 切换 的 时 候 页 面 不 会 发 生 跳动 。 


访问 基于 “focus 销 点 定位 ”实现 的 无 JavaScript 选 项 卡 切换 效果 实例 
页 面 ， 手 动 输入 http://demo.cssworld.cn/6/4-3.php 或 者 扫 下 面 的 二 维 码 。 
点 击 切 换 按钮 3， 效 果 如 图 6-39 所 示 。 


和 


图 6-39 ”选项 卡 3 选 中 效果 


可 以 发 现 ， 就 算 页 面 窗 体 就 有 滚动 条 ， 绝 大 多 数 情况 下 ， 也 都 不 会 
发 生 跳动 现象 ，HTML 和 核心 CSS 代 码 如 下 : 


<div class="box"> 
<div class="1list"><input id="one">1</div> 
<div class="1ist"><input id="two">2</div> 
<div class="1list"><input id="three">3</div> 
<div class="1list"><input id="four">4</div> 


</div> 
<div class="link"> 
<label class="click" for="one">1</label> 
<label class="click" for="two">2</label> 
<label class="click" for="three">3</label> 
<label class="click" for="four">4</label> 
</div> 
.box 1 
height: 1i0em; 
border: 1px solid #ddd; 
overflow: hidden; 


} 

.list { 
height: 100%; 
background: #ddd; 
position: relative; 


.list > input { 
position: absolute; top:0; 
height: 100%; width: 1px; 
border:0; padding: 0; margin: 0; 
clip: rect(0 0 ©0 0); 


原理 其 实 很 简单 ， 就 古 在 每 个 列表 里 窗 入 一 个 肉眼 看 不 见 的 
<input> 输 入 框 ， 然 后 选项 卡 按钮 变 成 <labe1l> 元 素 ， 并 通过 for 属 性 
与 <input> 输 入 框 的 1d 相 关联 ， 这 样 ， 点 击 选项 按钮 会 触发 输入 框 的 
focus 行 为 ， 触 发 销 点 定位 ， 实 现 选项 卡 切换 效果 。 


这 种 原理 实现 的 选项 卡 还 有 一 个 优点 束 是 ， 我 们 可 以 直接 使 用 Tab 
键 来 切换 、 浏 览 各 个 选项 面板 的 内 容 ， 传 统 的 选项 卡 实现 并 没有 如 此 便 
捷 的 可 访问 性 。 


然而 ， 上 面 这 种 技术 要 想 用 在 实际 项 目 中 还 离 不 开 JavaScript 的 文 
持 ， 一 个 是 选项 卡 按 钮 的 选中 效果 ， 男 一 个 就 是 处 理 列表 部 分 区 域 在 浏 
宽 右 外 面 时 依然 会 跳动 的 问题 。 相 关 处 理 类 似 下 面 的 做 法 ， 即 使 用 
jQuery 语法 ，: 


$('label.click').removeAttr('for').on('click', function() { 
$('.box').scrollTop(xxx); ' xxx' 表示 滚动 数值 


}); 


于 是 ， 束 算 JavaScript 出 现 异 常 或 者 加 载 缓慢， 选项 卡 点 击 功 能 依然 
正常 ， 并 且 直 接 用 Tab 键 浏览 选项 卡 内 容 的 超级 便捷 的 可 访问 性 也 保留 
来 了 。 综 合 来 看 ， 这 是 非常 不 错 的 一 种 选项 卡 实现 技巧 ， 这 种 技巧 实 
际 上 有 我 目 己 私 藏 的 专利 小 技术 ， 这 里 首次 公开 。 


同样 ， 这 一 技术 只 适用 于 高 度 固定 的 选项 卡 效果 ， 如 各 大 站 点 首页 
经 党 出 现 的 约 灯 请 广 告 切 换 效 打 等 。 


实际 上 ， 如 采 不 用 考虑 IE8 浏 咒 器 ， 可 以 利用 :checked 伪 类 、 单 选 
按钮 和 <label> 标 签 的 点 击 行为 实现 选项 卡 切 换 ， 书 知识 点 面 加 
IE8 及 以 上 版 本 的 浏览 锋 ， 因 此 这 一 技术 不 做 详细 介 


知道 overflow:hidden 元 素 依 然 可 以 滚动， 除了 可 以 帮助 我 们 实 
现 无 JavaScript 的 选项 卡 效 果 外 ， 还 可 以 帮助 我 们 理解 一 些 现象 发 生 的 原 
。 例 如 ， 我 之 前 提 到 过 的 使 用 margin- bottom 负 值 加 padding- 
bottom 正 值 以 及 父 元 素 overflow:hidden 配 合 实现 的 等 高 布局 ， 在 
大 多 数 情况 下 ， 这 种 布局 使 用 是 没有 任何 问题 的 ， 但 是 如 果 使 用 
dom,.scrollLIntoview() 或 者 触发 窗 体 视 区 范围 之 外 的 内 部 元 素 的 锁 
点 定位 行为 ， 布 局 就 会 飞 控 ， 没 错 ， 布 局 就 像 长 了 翅膀 一 样 飞 掉 了 。 
为 ， 此 时 容器 的 scrollHeight 〈 视 区 高 度 + 可 滚动 高 度 ) 要 远 远 大 于 
clientHeight 〈 视 区 高 度 ) ， 而 锚 点 定位 的 本 质 就 是 改变 容器 的 滚动 
高 度 ， 因 此 ， 容 器 的 滚动 高 度 不 是 0， 发 生 了 与 上 面 无 JavaScript 的 选项 
卡 类 似 的 效果 ， 产 生 布 局 问题 。 


就 我 目 己 的 切 喘 体会 而 言 ， 时 刻 牢记 overflow:hidden 元 素 依然 
可 以 深 动 这 一 点 ， 可 以 让 我 们 以 更 简单 、 更 原生 的 方式 实现 一 些 交 互 效 
条 。 举 个 例 和 于， 实现 目 定 义 的 滚动 条 效果 ， 因 为 Windows 系 统 下 浏览 需 
的 深 动 条 会 占据 宽度 ， 而 且 长 得 不 好 看 ， 所 以 就 存在 实现 目 定义 深 动 条 
的 需求 ， 也 束 是 类 似 移动 端的 巧 浮 式 滚动 条 。 


传统 实现 都 是 父 容器 设置 overflow:hidden， 然 后 子 元 素 使 用 一 
个 大 的 <div> 包 起 来 ， 设 置 绝对 定位 ， 然 后 通过 改变 top 值 ， 或 者 使 用 
transform 进 行 偏 移 。 


但 是 在 我 看 来 ， 最 推荐 的 实现 还 是 基于 父 容器 目 身 的 scrollTop 
值 改变 来 实现 目 定 义 滚动 条 效果 ， 其 好 处 有 如 下 这 些 。 


(1) 实现 简单 ， 无 须 做 边界 判断 。 因 为 就 算 scro1L1Top 设 
为 -999， 浏 览 器 依然 按照 0 来 泻 染 ， 要 想 深 动 到 底部 ， 直 接 一 个 很 大 的 
scrollTop 值 就 可 以 了 ， 无 须 任何 计算 。 例 如 : 


container.scrollTop = 99999,; 


列表 滚动 了 多 少 直接 就 是 scrol11Top 值 ， 实 时 获取 ， 天 然 存储 。 
传统 实现 要 变量 以 及 边界 更 新 ， 很 哆 嗓 。 


(2) 可 与 原生 的 scrol11 事 件 天 然 集成 ， 无 颖 对 接 。 例 如 ， 我 们 的 
滚动 延迟 加 载 图 片 效果 束 可 以 直接 应 用 ， 因 为 图 片 位 置 的 计算 往往 都 是 
和 scrol1LTop 值 相关 联 的 ， 所 以 传统 实现 scro1LLTop 值 一 直 是 0， 很 
可 能 导致 这 类 组 件 出 现 异 常 。 


(3) 无 须 改 变 子 元 素 的 结构 。 传 统 实 现 为 了 定位 方便 ， 会 给 所 有 
的 列表 元 素 外 面包 一 层 独立 的 <div> 元 素 ， 这 可 能 会 导致 某 些 选择 器 
(类 似 于 ,container > .1ist{}) 失效 ， 但 是 ， 基 于 父 容器 本 身 的 
scrollTop 深 动 实现 则 无 此 问题 ， 即 使 子 元 素 全 是 兄弟 元 素 也 是 可 以 
的 。 


当然 ， 没 有 哪 种 技术 古 万 能 的 ， 基 于 改变 overflow:hidden 父 容 
器 的 Scroll1Top 实 现 目 定 义演 动 条 效 采 也 有 几 点 不 足 : 一 古 无 法 添加 
类 似 Bounce 回 弹 这 种 动 效 ;二 是 泻 染 要 比 一 般 的 泻 染 慢 一 些 ， 但 大 多 
数 场景 下 用 户 都 是 无 感知 的 。 


大 家 可 根据 目 己 项 目的 实际 情况 目 行 取舍， 选择 合适 的 技术 。 


6.5 float 的 兄弟 position:absolute 


我 一 直 认 为 position:absolute (下 简称 absolute) 和 
float :left/float: right (下 简称 float) 是 兄弟 关系 ， 都 兼 
有 具 * 块 状 化 ”“ 包 囊 性 关 破 坏 性 ”等 特性 ， 不 少 布局 场合 甚至 可 以 相互 蔡 
代 。 有 人 可 能 会 疑惑 : 一 个 属性 名 是 position， 一 个 是 
float,“ 姓 ?都 不 一 样 ， 还 兄弟 呢 ? 


实际 上 是 这 样 的 ，absolute 和 float 可 以 看 作 是 “ 同 父 异 母 ” 的 兄 
弟 关 系 。 它 们 的 父亲 是 同一 个 人 ， 是 CSS 世 界 的 大 魔王 ， 属 于 魔界 ; 但 
母亲 不 是 一 个 人 ，absolute 的 母亲 来 自 魔界 ， 而 float 的 母 杀 来 自 人 
界 。 


但 是 ，absolute 从 不 承认 它 有 一 个 半 魔 半 人 的 兄弟 float， 两 人 
是 水 火 不 容 。 由 于 absolute 血 脉 更 纯 ， 能 力 更 霸道 ， 因 此 ， 当 
absolute 和 float 同 时 存在 的 时 候 ，float 属 性 是 无 任何 效 采 的 。 
此 ， 没 有 任何 理由 absolute 和 float 同 时 使 用 : 


.brother { 
position: absolute; 


float: left; // 无 效 


} 


里 然 嘴 上 不 承认 ， 但 事实 摆 在 那里 ， 毕 范 有 那么 多 共性 ， 这 兄 第 天 
系 是 跑 不 了 了 。 


例如 ,“ 块 状 化 ”和 浮动 类 似 ， 元 素 一 旦 position 属 性 值 为 
absolute 或 fixed， 其 display 计 算 值 就 是 plock 或 者 table。 例 
如 ，<span> 元 素 默 认 是 inline 水 平 ， 但 是 一 旦 设置 
position:absolute， 其 display 计 算 值 就 变 成 了 block， 我 们 可 
以 使 用 简单 的 JavaScript 代 码 验 证 上 面 的 观点 。 打 开 浏 览 器 控制 台 ， 输 入 
如 下 JavaScript 代 码 : 


var Span = document.createElement('span'); 
document. body, appendChild( span); 
， ' + window.getComputedSstyle(span).display); 


span.style.position = 'absolute'; 
console.l1og('2. ' + window.getComputedStyle(span).display); 


执行 后 的 结果 如 图 6-40 所 示 。 


var span = document.createElement('span'); 
document .body .appendChild(span); 
console.log('1. "+ 
Window.getComputedStyle(span).display); 
span.style.position = 'absolute'; 
console.log('2. "+ 
Window.getComputedStyle(span).display); 


1. inline VM94 :3 


2. block VMOA 


图 6-40 ”绝对 定位 让 元 素 块 状 化 


又 比方 说 “破坏 性 ”"， 指 的 是 破坏 正常 的 流 特性 。 和 float 类 似 ， 虽 
然 absolute 破 坏 正常 的 流 来 实现 自己 的 特性 表现 ， 但 本 身 还 是 受 普 
的 流体 元 素 布 局 、 位 置 甚至 一 些 内 联 相关 的 CSS 属 性 影响 的 ， 这 部 分 
容 会 在 6.5.2 节 介绍 。 


通 
内 


又 比方 说 两 者 都 能 “ 块 状 格式 化 上 下 文 "， 也 就 是 BFC 。 


又 比方 说 两 者 都 具有 “ 包 衷 性 ”， 也 就 是 尺寸 收缩 包 右 ， 同 时 具有 和 上 自 
适应 性 。 有 些 人 知道 dijsplay:inline-block 声 明 具 有 “ 包 误 性”"， 希 
望 绝 对 定位 元 素 也 如 此 ， 就 有 了 下 面 这 样 的 设置 : 


.wrap { 
display: inline-block; // 没有 必要 


position: absolute; 


实际 上 absolute 天 然 具有 “ 包 囊 性 ”>， 因 此 没有 必要 使 用 
display:inline-block， 如 果 要 让 元 素 显 示 或 者 “无 依赖 定位 >， 可 
以 试 试 更 简短 的 display:inline。 但 是 ， 和 float 或 其 他 “ 包 训 
性 ”声明 带 来 的 “ 自 适应 性 *” 相 比 ，absolute 有 一 个 平时 不 太 被 人 注意 的 
差异 ， 那 就 是 absolute 的 自 适应 性 最 大 宽度 往往 不 是 由 父 元 素 决 定 


的 ， 本 质 上 说 ， 这 个 差异 是 由 “包含 块 > 的 差异 决定 的 。 换 名 话说， 
SEE ‘包含 块 ”。 


6.5.1 absolute 的 包含 块 


包含 块 (containing block) 这 个 概念 实际 上 大 家 一 直 都 有 接触 ， 就 
是 元 素 用 来 计算 和 定位 的 一 个 框 。 比 方 说 ，width:50%， 也 就 是 宽度 
一 半 ， 那 到 底 是 哪个 元素” 宽度 的 一 半 呢 ? 注意 ， 这 里 的 这 个 “元 素 ” 实 
际 上 就 是 指 的 “包含 块 ”。 有 经 验 的 人 应 该 都 知道 ， 普 通 元 素 的 百分比 宽 
度 是 相对 于 父 元 素 的 content box 宽 度 计算 的 ， 而 绝对 定位 元 素 的 宽度 是 
相对 于 第 一 个 position 不 为 static 的 祖先 元 素 计算 的 。 实 际 上 ， 大 

经 和 “包含 块 " 打 过 交道 了 ， 对 于 这 些 计算 规则 ， 规 范 是 有 了 明确 定义 
的 ， 具体 如 下 (剔除 了 不 常用 的 部 分 内 容 ) 


(1) 根 元 素 (很 多 场景 下 可 以 看 成 是 <html>) 被 称 为 “初始 包含 
块 "， 其 尺寸 等 同 于 浏览 右 可 视窗 口 的 大 小 。 


(2) 对 于 其 他 元 素 ， 如 果 该 元 素 的 position 是 relative 或 者 
static， 则 “包含 块 ”* 由 其 最 近 的 块 容器 祖先 盒 的 content box 边 界 形成 。 


(3) 如 果 元 素 position:fixed， 则 “包含 块 * 是 “初始 包含 块 ”。 


(4) 如 果 元 素 position:absolute， 则 “包含 块 > 由 最 近 的 
position 不 为 static 的 祖先 元 素 建 立 ， 具 体 方式 如 下 。 


如 果 该 祖先 元 素 是 纯 inline 元 素 ， 则 规则 略 复杂 : 


。 假设 给 内 联 元 素 的 前 后 各 生成 一 个 宽度 为 0 的 内 联 盒子 (inline 
box) ， 则 这 两 个 内 联 盒子 的 padding box 外 面 的 包围 盒 就 是 内 联 元 
素 的 “包含 块 ”; 

如 果 该 内 联 元 素 被 跨行 分 制 了 ， 那 么 “包含 块 " 是 未 定义 的 ， 也 就 是 
CSS2.1 规 范 并 没有 明确 定义 ， 浏 览 器 上 自行 发 挥 。 


否则 , “包含 块 ”由 该 祖先 的 padding box 边 界 形成 。 
如 果 没 有 符合 条 件 的 祖先 元 素 ， 则 “包含 块 * 是 “初始 包含 块 ”。 


可 以 看 到 ， 和 常规 元 素 相 比 ，absolute 绝 对 定位 元 素 的 “包含 
块 * 有 以 下 3 个 明显 差异 : 


(1) 内 联 元 素 也 可 以 作为 “包含 块 ” 所 在 的 元 素 ; 


(2)“ 包 含 块 ” 所 在 的 元 素 不 是 父 块 级 元 素 ， 而 是 最 近 的 position 
不 为 static 的 祖先 元 素 或 根 元 素 ; 


(3) 边界 是 padding box 而 不 是 content box 。 


下 先 讲 第 一 点 差异 ， 也 就 是 内 联 元 素 可 以 作为 “包含 块 *。 这 一 点 倍 
计 很 多 人 都 不 知道 ， 因 为 平时 使 用 得 少 。 为 何平 时 用 得 少 ?” 原因 如 下 。 


(1) 我 们 一 旦 使 用 absolute 绝 对 定位 ， 基 本 上 都 是 用 来 布局 ， 
而 内 联 元 素 主要 的 作用 是 图 文 展示 ， 所 谓 道 不 同 不 相 为 谋 ， 因 此 两 者 很 
难 恋 到 一 块 儿 。 


(2) 理解 和 学 习 成 本 比较 高 。 内 联 元 素 的 “包含 块 " 不 能 按照 常规 
块 级 元 素 的 “包含 块 " 来 理解 。 举 个 例子 ， 如 下 HTML 代 码 : 


<Span style="position:relative;"> 
我 是 <big style="font-size:200%; "> 字号 很 大 </big> 的 文字 


</span> 


其 效果 如 图 6-41 所 示 。 请 问 : 此 时 <span> 元 素 的 “包含 块 " 沁 围 是 什 
人 ? 


如 采 对 定义 理解 不 够 ， 很 容易 误 认 为 包含 块 的 上 下 边缘 被 其 中 “ 字 
号 很 大 ”的 <big> 元 素 给 撑 大 了 “。 实 际 上 ， 此 时 元 素 的 “包含 块 " 范 围 与 
<big> 元 素 毫 无 天 系 ， 了 就算 其 字号 大 小 设置 得 再 大 , “包含 块 ”范围 依然 
古 图 6-42 虚 线 所 示 的 那么 大 。 原 因 很 简单 ， 内 联 元 素 的 “包含 块 ”是 由 “ 生 

成 的 ”前 后 内 联 盒子 决定 的 ， 与 里 面 的 内 联 盒 子 细 市 没有 任何 关系 。 


我 E 字 号 很 大 xs， 


图 6-41 简单 的 文字 呈现 效果 


7 包含 块 ” 


图 6-42 ”实际 的 “包含 块 " 范 围 大 小 


我 根据 自己 的 进一步 测试 发 现 ， 内 联 元 素 的 “包含 块 ” 可 以 
:first-1ine 伪 元 素 影 响 ， 但 不 受 : :first-letter 伪 元 素 影 
i 


可 以 看 出 ， 内 联 元 素 的 “包含 块 ? 范 围 相对 稳固 ， 不 会 受 ]ine- 
height 等 属性 影响 ， 因 此 ， 理 论 上 其 还 是 有 实用 价值 的 。 


(3) 兼容 性 问题 。 无 论 内 联 元 素 是 单行 还 是 跨行 都 存在 兼容 性 问 
题 。 单 行 的 兼容 性 问题 存在 于 “ 包 舍 块 "是 一 个 空 的 内 联 元 素 的 时 候 。 例 
如 ， 按 照 我 们 的 理解 ， 下 面 的 代码 实现 的 效果 应 该 是 图 片 在 容器 的 右上 
角 对 齐 : 


<p> 
<Span> 
<img src="1.jpg"> 


p { text-align: right; } 
p > span { position: relative; } 
p > span > img { 

position: absolute,; 

right: ©; 


但 是 根据 我 的 测试 ， 在 IE8 至 IE10 浏 览 器 下 ， 图 片 完全 在 <p> 容 器 的 
左 侧 外 部 显示 了 ，IE Edge 中 则 无 此 问题 。 需 要 给 空 的 <span> 元 素 设 置 
border 或 padding 主 “幽灵 空白 万 点 ”显现 或 者 直接 播 入 字符 才能 表现 
一 致 6 


跨行 的 兼容 性 问题 在 于 规范 对 此 行为 并 未 定义 ， 导 致 浏览 器 在 实现 
上 各 有 差异 。 主 要 差异 在 于 ，Firefox 浏 览 器 的 “包含 块 * 仅 覆盖 第 一 行 ， 
而 开 和 Chrome 浏 咒 器 “包含 块 ”的 表现 完全 符合 定义 ， 由 第 一 行 开 头 和 最 
后 一 行 结 尾 的 内 联 盒 子 共同 决定 。 差 异 如 图 6-43 所 示 。 


我 是 第 二 行内 容 。 Furefcox 殴 团 
eo (== 

字号 很 大 xz， 

找 是 第 二 行内 容 。; Chwowwe 蕉 图 


图 6-43 ”Firefox 和 Chrome 跨 行内 联 元 素 “ 包 含 块 ?对 比 


个 人 认为 ， 正 (包括 IE8) 和 Chrome 浏 览 器 的 泻 染 规则 是 更 准确 
的 ， 但 这 种 泻 染 可 能 会 带 来 另外 一 个 疑惑 ， 如 果 内 联 元 素 最 后 一 个 内 联 
盒子 的 右边 缘 比 第 一 个 内 联 盒子 的 左边 缘 还 要 靠 左 ， 那 岂 不 是 “包含 
块 ? 宽 度 要 为 负 了 ? 眼见 为 实 ， 例 如 ， 我 们 修改 一 人 HTML ， 让 “包含 
块 ” 从 后 面 的 文字 开始 算 起 : 


我 是 <big style="font-size:200%; "> 字号 很 大 </big> 


<span style="position:relative;"> 的 文字 ! 我 是 第 二 行内 容 。</span> 


结果 “包含 块 ” 的 宽度 按照 0 来 处 理 了 ， 起 始 位 置 为 第 一 个 内 联 盒 子 所 在 
的 位 置 ， 如 图 6-44 所 示 。 
和 字号 很 大 xs ! 


我 是 第 二 行内 容 。 
图 6-44 “包含 块 * 表 现 为 宽度 0 示意 
然后 讲 第 二 点 差异 ， 也 就 是 绝对 定位 元 素 计算 的 容器 是 第 一 个 
position 不 为 static 的 祖先 元 素 。 这 个 很 多 人 知道 ， 因 为 平时 
left、top 定 位 用 得 很 频繁 ， 用 着 用 着 就 知道 了 百分比 宽度 、 高 度 以 及 
定位 什么 的 和 普通 元 素 不 一 样 。 这 也 衍生 出 了 另外 一 个 有 意思 的 小 问 


题 ， 就 是 height :100% 和 height:inherit 的 区 别 。 对 于 普通 元 素 ， 
两 者 确实 没什么 区 别 ， 但 是 对 于 绝对 定位 元 素 束 不 一 样 了 。 

height :100% 是 第 一 个 具有 定位 属性 值 的 祖先 元 素 的 高 度 ， 而 
height:inherit 则 是 单纯 的 父 元 素 的 高 度 继承 ， 在 某 些 场景 下 非常 
好 用 。 


然后 号 是 很 多 人 并 没有 注意 到 的 ， 也 是 本 节 的 重点 内 容 ， 那 就 是 绝 
对 定位 元 素 的 “ 包 夺 性 ”中 的 “宽度 目 适 应 性 ”其 实 也 是 相对 于 “包含 块 "来 
表现 的 。 


我 们 先 从 一 个 简单 的 例子 说 起 ， 代 码 如 下 : 


.box { position: absolute; } 


<div class="box"> 文 字 内 容 </box> 


请 问 : ,box 元 素 的 宽度 是 多 少 ? 文字 会 换行 吗 ? 如 采 ,box 元素 中 
有 满 满 1000 个 汉字 ， 文 字 会 换行 吗 ? 如 有 果 换 行 ， 在 哪里 换行 ? 


很 简单 的 例子 ， 很 简单 的 问题 ， 但 是 能 够 准确 地 回答 清楚 的 人 恐怕 
并 不 多 。 


在 通 第 场景 下 ，.box 元 素 宽度 束 古 里 面 文字 的 宽度 ， 不 会 换行 ; 
随 着 文字 越 来 越 多 ， 如 有 果 文字 足够 多 ， .box 元 素 冤 度 会 越 来 越 大 ， 但 
征 不 会 无 限制 大 下 去 ， 因 为 超过 一 定 限 制 是 会 目 动 换行 的 ， 而 这 个 限制 
就 是 . box 元素 的 “包含 块 ”。 


注意 这 里 的 几 个 措辞 ， 第 一 个 是 “ 通 稍 场 景 下 "”， 第 二 个 是 “会 目 动 
换行 ”。“ 会 目 动 换行 ?说 的 吏 是 “ 包 训 性 ”中 的 “宽度 目 适应 性 ”。 举 个 简单 


的 例子 ， 假 设 , box 元 素 有 一 个 宽度 200px 同 时 position 为 relative 
的 容器 元 素 ，CSS 代 码 如 下 : 


,Container { 
width: 200px; 
border: 1px solid; 
position: relative; 


.box { position: absolute; } 


同时 . box 元 素 里 面 的 文字 内 容 非常 多 ， 此 时 ，. box 元 素 的 “包含 块 ”就 
是 .container 元 素 ， 因 此 ，. box 元 素 最 终 的 宽度 就 是 200px ( 见 图 6- 
45) ， 也 就 是 说 ， 绝 对 定位 元 素 默认 的 最 大 宽度 就 是 “包含 块 > 的 宽度 。 


.Container 高 度 塌陷 是 因为 absoLute 破 坏 了 正常 的 CSS 流 ， 此 
旋 “ 破 坏 性 ”; 宽度 被 relative 限 制 在 最 大 200pXx， 此 乃 “ 包 右 性 ”， 
此 ， 对 于 弹 框 这 种 绝对 定位 或 固定 定位 的 元 素 是 没有 必要 设置 max - 
width :100% 的 : 


dialog { 
position: absolute; 


max-width: 100%; /* 多 余 */ 


} 


而 “通常 场景 下 ”说 的 是 ， 有 可 能 我 们 的 “包含 块 ”( 或 者 "包含 块 剩 
余 的 空间 ) 小 到 不 足以 放下 “文字 内 容 *” 这 4 个 汉字 。 于 是 ,一些 “怪异 ”的 
现象 束 很 好 理解 了 ， 比 方 说 纯 CSS 定 位 或 JavaScript 计 算 定 位 实现 的 提示 
效果 一 柱 擎 天 的 问题 。 


先 看 CSS 实 现 ， 演 示 地 址 为 http:Wdemo.cssworld.cn/6/5-1.php。 我 们 
的 目标 效果 是 鼠标 hover 图 标 出 现 类 似 于 如 图 6-46 所 示 的 效果 。 


图 6-46 ”计划 实现 的 提示 效果 


我 们 可 以 利用 : :before 和 : :after 伪 元 素 实现 我 们 想 要 的 效果 ， 

一 个 实现 三 角 ， 一 个 实现 矩形 区 。 为 了 不 干扰 布局 ， 显 然 实 现 提示 效果 
的 两 个 伪 元 素 会 使 用 absolute 绝 对 定位 ， 为 了 定位 准确 ， 我 们 会 给 小 
图 标 元 素 设置 position:relative。 此 时 间 题 来 了 : 由 于 提示 信息 的 
内 容 有 长 有 短 ， 我 们 不 可 能 给 提示 元 素 设置 一 个 特定 的 宽度 ， 于 是 宽度 
表现 走 “ 包 于 性 *"， 也 就 是 最 大 宽度 不 超过 “包含 块 * 的 宽度 ， 但 是 恰好 此 
时 “包含 块 * 就 是 我 们 的 小 图 标 元 素 ， 并 且 宽 度 往往 都 不 超过 20 像 素 ， 世 
瓯 是 我 们 的 提示 信息 只 能 够 在 20 像 素 宽 的 区 域内 显示 ， 这 残 导 致 了 最 终 
的 文字 内 容 “ 一 柱 擎 天 *， 如 图 6-47 所 示 。 


要 修复 这 一 问题 其 实 很 简单 ， 只 要 改变 默认 的 宽度 显示 类 型 就 可 
以 ， 添 加 white-space: nowrap， 让 宽度 表现 从 “ 包 庄 性” 变 成 < 最 大 
可 用 宽度 ”， 点 击 演示 页 面 的 删除 图 标 可 看 到 修复 “一 柱 擎 天 ”问题 后 的 
效果 。 


绝对 定位 元 素 “ 包 囊 性 ?的 “包含 块 ?限制 不 仅 出 现在 宽度 不 足 的 时 
候 ， 有 时 候 就 算 “ 包 含 块 ” 的 宽度 足够 大 ， 也 依然 会 出 现 * 一 柱 擎 天 ”。 服 
见 为 实 ， 还 是 提示 信息 效 采 ， 不 过 这 次 我 们 使 用 JavaScript 实 现 ， 墨 色 提 
示 条 相关 的 HTML 内 容 直 接 插入 <body> 标 签 中 ， 比 时 “包含 块 "的 袖 5 度 
就 是 浏览 右 窗 体 的 寓 度 ， 按 道理 讲 ， 是 不 会 出 现 “ 一 柱 擎 天 "效果 的 ， 但 
是 人 算 不 如 天 算 ， 不 该 发 生 的 还 是 发 生 了 ! 


演示 地 址 为 http://demo.cssworld.cn/6/5-2.php。 当 我 们 的 小 图 标 在 浏 
多 器 窗 体 靠近 右 侧 边缘 的 上 时候，“ 一 柱 擎 天 ”的 悲剧 同样 发 生 了 ， 如 图 6- 
48 所 示 。 


册 


图 6-47 ”被 “包含 块 ”限制 的 一 柱 敬 天 效果 (CSS 版 ) 


图 6-48 ”被 “包含 块 " 限 制 的 一 柱 敬 天 效果 (JavaScript 版 ) 


原因 不 难 理解 。 虽 然 说 黑色 的 提示 元 素 的 “包含 块 ”宽度 是 整个 浏 饥 
如 窗 体 宽 度 ， 放 几 个 文字 绰绰有余 ,但 是 ， 由 于 我 们 的 图 标 位 于 浏览 器 
的 右边 缘 ，JavaScript 定 位 的 时 候 ， 殊 会 设置 一 个 很 大 的 left 属 性 值 ， 
导致 " 包 侣 块 "剩余 的 至 间 不 足 ， 也 台 是 提示 元 素 的 “和 目 适 应 宽度 ”不足 ， 
导致 文字 只 能 坚 着 显示 ， 从 而 出 现 “ 一 柱 擎 天 ”。 


要 修复 此 问题 其 实 很 简单 ， 只 要 改变 默认 的 宽度 显示 类 型 就 可 以 ， 
添加 white-space: nowrap， 计 宽度 表现 从 “ 包 计 性” 变 成 “最 大 可 用 
宽度 ”， 点 击 演示 页 面 的 删除 图 标 可 看 到 修复 “一 柱 擎 天 ”问题 后 的 歼 
果 。 当 然 ， 实 际 开发 的 时 候 ， 最 好 改变 提示 的 方向 ， 例 如 右边 缘 的 时 
候 ， 左 侧 提示 。 


最 后 讲 第 三 点 差异 ， 也 就 是 计算 和 定位 是 相对 于 祖先 定位 元 素 的 
padding box。 为何 绝对 定位 的 定位 要 相对 于 padding box 呢 ?这 其 实 和 
overf1ow 隐 藏 也 是 padding box 边 界 类 似 ， 都 是 由 使 用 场景 决定 的 。 


举 个 例子 ， 在 移动 端 ， 为 了 实现 民 好 的 视觉 感受 ， 列 表 或 者 模块 的 
言 息 内 容 主 体 距离 窗 体 两 侧 都 有 一 定 的 空白 ， 这 个 空白 一 般 都 会 使 用 
padding 撑 开 的 ， 而 不 是 margin， 原 因 在 于 这 些 列表 是 链接 ， 外 部 一 
定 会 使 用 <a> 元 素 ， 而 为 了 准确 反馈 响应 区 域 ，<a> 元 素 在 tap 的 时 候 
会 由 加 深 的 背景 块 示 意 (参见 微 信 列 表 tap 时 候 的 反馈 ， 所 以 ， 如 果 
左右 的 间距 使 用 margin 撑 开 ， 就 会 出 现 列表 的 点 击 反馈 背景 区 域 左 右 
边 距 透明 的 问题 ， 视 党 效果 和 体验 都 是 不 好 的 ， 因 为 margin box 永 远 是 
透明 的 。 


现在 来 需求 了 : 需要 在 列表 或 者 模块 的 右上 角 显 示 一 个 明显 的 标 
签 ， 如 “精华 ”“ 呈 冠 " 之 类 。 此 时 ， 我 们 无 须 任 何 计算 ， 直 接 使 用 数值 9 
定位 在 列表 的 右上 角 即 可 ， 代 码 示 意 如 下 : 


, St { 
padding: 1irem; 


‘tag { 


position: absolute; 
top: 0; right: 0; 


但 是 ， 如 果 我 们 的 定位 是 相对 于 content box 计 算 的 ， 则 CSS 代 码 应 该 类 
似 这 样 : 
.list { 
padding: 1irem; 
‘tag { 


position: absolute; 
top: 1irem; right: 1irem; 


} 


看 上 去 好 像 没 什么 问题 ， 但 实际 上 增加 了 我 们 日 后 开发 维护 的 成 
本 ， 因 为 绝对 定位 元 素 的 定位 值 和 列表 容器 的 padding 值 耦合 在 一 起 
了 : 当 我 们 对 padding 间 距 进行 调整 的 时 候 ， 绝 对 定位 元 素 的 right、 
top 值 也 一 定 要 跟着 一 起 调整 ， 否 则 就 会 出 现 样 式 问题 ， 而 实际 开发 的 
时 候 ， 忘 记 调整 绝 对 定位 元 素 的 定位 值 是 非常 常见 的 ，bug 继 而 出 现 。 


对 一 个 项 目 而 言 ， 间 距 并 非 一 成 不 变 ， 列 表 间 的 上 下 左右 间距 会 因 
为 内 容 或 者 场景 的 不 同 而 不 同 ， 这 就 导致 每 一 次 出 现 有 差异 的 布局 ， 我 
们 都 需要 重新 额外 写 一 个 定位 样式 。 例 如 : 


.]ist-2 { 
padding: .75rem; 


.tag-2 { 


position: absolute; 
top: .75rem; right: .75rem; 


这 显然 增加 了 一 定 的 开发 成 本 。 而 相对 于 padding box 定 位 ， 列 表 的 
padding 属 性 值 是 多 少 对 我 们 的 样式 表现 没有 任何 影响 。 眼 见 为 实 ， 扫 
下 面 的 二 维 码 访问 。 点 击 列表 下 面 的 按钮 改变 列表 的 padding 值 大 小 会 
发 现 ， 我 们 的 标签 在 右上 角 微 丝 不 动 ， 如 图 6-49 所 示 。 


G 改变 列表 padding 大 小 : 


图 6-49 padding 变 大 后 绝对 定位 元 素 位 置 依旧 稳固 


然而 ， 实 际 项 目 场景 千变万化 ， 有 时 候 ， 我 们 需要 的 效果 并 不 是 定 
位 在 列表 的 边 绿 ， 而 是 定位 在 内 容 的 边 绿 ， 很 多 人 不 假 思索 承 直 接 使 用 
类 似 下 面 的 代码 实现 : 
.]ist { 

padding: 1irem; 


‘tag { 


position: absolute; 
top: 1irem; right: 1irem; 


效果 虽然 达成 了 ， 但 是 底子 还 是 不 够 稳固 ， 因 为 top、right 属 性 
值 大 小 和 padding 属 性 值 耦合 在 了 一 起 。 实 际 上 ， 有 人 小 技巧 可 以 使 其 不 
耦合 ， 那 就 是 间距 不 是 使 用 padding 撑 开 ， 而 是 使 用 透明 的 border 撑 
开 。 例 如 : 

.list { 
border: irem solid transparent; 


.tag { 
position: absolute; 


top: 0; right: 0; 


top、right 属 性 值 都 是 09， 说 固定 了 下 来 ， 于 是 当 间 距 发 生变 化 
的 时 候 ， 只 需要 改变 border 宽 度 束 可 以 ， 示意 如 下 : 


, LSt-2 { 
border: ,75rem Solid transparent ; 


此 技巧 唯一 需要 注意 的 就 是 尽量 不 要 设置 overflow:hidden。 
6.5.2 ”具有 相对 特性 的 无 依赖 absolute 绝 对 定位 


即使 写 了 很 多 年 CSS 代 码 的 人 也 可 能 会 错误 地 回答 下 面 这 个 问题 : 
一 个 绝对 定位 元 素 ， 没 有 任何 left/top/right/bottom 属 性 设置 ， 
并 且 其 祖先 元 素 全 部 都 是 非 定 位 元 素 ， 其 位 置 在 哪里 ? 


很 多 人 都 认为 是 在 浏览 右 窗 口 左上 方 。 实 际 上 ， 还 是 当前 位 置 ， 不 
是 在 浏览 郁 克 上 方 。 

这 是 关于 absolute 绝 对 定位 最 典型 的 错误 认 知 。 正 是 这 种 错误 认 
知 导 致 几 是 使 用 absolute 绝 对 定位 的 地 方 ， 一 定 父 容器 


position:relative， 同 时 left/top 等 属性 定位 ， 甚 至 必 同 时 使 用 
z-index 属性 设置 层级 。 


在 我 看 来 ， 这 有 是 非常 严重 的 认 知 和 使 用 错误 ! 


请 牢记 下 面 这 人 句 话 : absolute 是 非常 独立 的 CSS 属 性 值 ， 其 样式 
和 行为 表现 不 依赖 其 他 任何 CSS 属 性 就 可 以 完成 。 


言语 是 苍白 的 ， 我 们 来 看 一 个 例子 感受 一 下 。 图 6-50 左 上 角 有 一 
个 “TOP1” 的 图 形 标 志 ， 请 问 如 何 布局 ? 


步 疏 
Q 
<0 


图 6-50 左上 角 有 “TOP1” 图 形 目标 效果 示意 


.father { 
position: relative; 


} 

,Shape 1{ 
position: absolute; 
top: 0; left: 0; 


} 


如 果 你 也 是 这 么 实现 的 ， 束 要 注意 了 ， 因 为 这 说 明 你 对 absolute 
认 知 还 是 太 浅 薄 了 。 实 际 上 ， 只 用 下 面 一 行 CSS 束 足够 了 : 


,Shape 1{ 
position: absolute; 
} 


没 错 ， 束 这 一 行 ， 而 且 兼 容 性 好 得 出 奇 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/6/5-4.php 或 者 扫 右 侧 的 二 维 码 。 


看 到 没 ? absolute 定 位 效果 实现 完全 不 需要 父 元 素 设 置 
position 为 relative 或 其 他 什么 属性 就 可 以 实现 ， 我 把 这 种 没有 设 
置 left/top/right/bottom 属 性 值 的 绝对 定位 称 为 “无 依赖 绝对 定 
位 *”。 很 多 场景 下 ,，“ 无 依赖 绝对 定位 ”要 比 使 用 left/top 之 类 属性 定位 
实用 和 强大 很 多 ， 因 为 其 除了 代码 更 简洁 外 ， 还 有 一 个 很 棒 的 特性 ， 就 
是 “相对 定位 特性 ”。 


明明 absolute 是 “绝对 定位 的 意思 ， 怎 么 又 扯 到 ‘相对 定位 特性 * 了 
呢 ? 没 错 ,“ 无 依赖 绝对 定位 ?本质 上 就 是 “相对 定位 >， 仅 仅 是 不 占据 
CSS 流 的 尺寸 空间 而 已 。 


“相对 性 ?和 “不 占据 空间 ”这 两 个 特性 在 实际 开发 的 时 候 非常 有 用 ， 
除了 上 面 左 上 角 加 “TOP1” 图 形 标志 的 案例 ， 我 再 举 几 个 实用 例子 ， 展 示 
一 下 “无 依赖 绝对 定位 ?的 强大 之 处 。 

1. 各 类 图 标定 位 

我 们 经 常会 在 导航 右上 方 增加 一 个 “NEW” 或 者 “HOT” 这 样 的 小 
标 ， 如 图 6-51 所 示 。 要 实现 在 导航 文字 右上 方 的 定位 很 简单 ， 直 接 对 加 
图 标 这 个 元 素 进 行 样式 设 定 就 可 以 了 ， 原 来 纯 文 字 导 航 时 的 样式 完全 不 
需要 有 一 丁点 儿 的 修改 。 下 面 以 “HOT”* 图 标 为 例 : 


N 
热门 导航 着 导航 


图 6-51 ”导航 文字 右上 方 图 标示 意 


.icon-hot { 
position: absolute; 
margin: -6px 0 90 2px; 


width: 28px; height: 11px; 
background: url(hot.gif); 


一 个 简 简 单单 的 position:absolute， 然 后 通过 margin 属 性 进 
行 定 位 ， 效 果 即 达成 ， 包 括 IE6 在 内 的 浏览 器 都 是 兼容 良好 的 。 


日 后 这 个 图 标 下 架 了 ， 我 们 只 需要 把 图 标 对 应 的 HTML 代 码 和 CSS 
删 掉 就 可 以 ， 原 来 的 代码 完全 不 需要 改动 。 不 仅 代码 简洁 ， 日 后 的 维护 
也 很 方便 ， 更 关键 的 是 ， 即 使 导航 中 的 文字 长 度 发 生 了 变化 ， 我 们 的 图 
标 依 然 定 位 良好 ， 因 为 “无 依赖 绝对 定位 * 的 图 标 是 自动 跟 在 文字 后 面 显 
示 的 。 


设想 一 下 ， 如 果 给 父 元 素 设置 position:relative， 然 后 
right/top 定 位 ， 文 字 长 度 一 旦 发 生变 化 ，CSS 代 码 就 要 重新 调整 ， 这 
维护 成 本 显然 要 比 前 一 种 方法 高 了 很 多 。 有 眼见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/6/5-5.php 或 者 扫 下 面 的 二 维 码 。 实 际 上 ， 即 使 是 
普通 的 水 平 对 齐 的 图 标 也 可 以 使 用 “无 依赖 绝对 定位 ”实现 ， 类 似 图 6-52 


所 示 效 来 。 


图 6-52 片 和 文字 水 平 对 齐 


我 们 可 以 这 么 处 理 : 


<span class="icon-x"> 
<i class="icon-warn"></i> 邮 箱 格式 不 准确 


</span> 
.ijcoN-x { 
line-height: 20px; 
padding-left: 20px; 


.icon-warn { 
position: absolute; 
margin-left: -20px; 
width: 20px; height: 20px; 


background: url(warn.png) no-repeat center ; 
} 


同样 是 position:absolute， 然 后 简单 的 margin 偏 移 实 现 。 此 
方法 兼容 性 很 好 ， 与 nline-block 对 齐 相 比 的 好 处 在 于 ，inline- 
block 对 齐 最 终 行 框 高 度 并 不 是 20px， 因 为 中 文 下 沉 ， 图 标 居 中 ， 要 

ea 上 水 平 ， 图 标 vertical-align 对 齐 要 比 实际 低 一 点 儿 ， 这 就 

导致 最 终 整 个 行 框 的 高 度 不 是 预期 的 20px， 而 是 21px 或 者 更 大 。 但 
是 ， 如 果 使 用 “无 依赖 绝对 定位 ”实现 ， 则 完全 不 要 担心 这 一 问题 ， 因 为 
绝对 定位 元 素 不 会 改变 正常 流 的 尺寸 空间 ， 束 算 我 们 的 图 标 有 30px 大 
小 ， 行 框 高 度 依 然 是 纯 文本 所 在 的 20px 高 度 。 


2. 超越 常规 布局 的 排版 


图 6-53 给 出 的 十 一 个 常见 的 注册 表单 ， 为 了 保证 视觉 舒适 ， 我 们 往 
往 会 让 表单 水 平 居 中 对 齐 。 例 如 ， 这 里 宽度 300 多 像素 ， 于 是 有 : 


* 邮箱 


图 6-53 ”水 平 居 中 对 齐 的 注册 表单 


.box { 
width: 356px; 


margin: auto,; 


通过 设置 margin:auto 实 现 水 平 居 中 效果 ， 乍 一 看 效果 达成 ， 但 
是 实际 开发 的 时 候 还 有 提示 或 报错 等 交互 效果 。 有 一 种 做 法 是 提示 信息 
放 在 输入 框 的 下 面 ， 但 这 样 做 会 带 来 一 种 不 好 的 体验 ， 那 就 是 提示 信息 
出 现 和 隐藏 的 时 候 ， 整 个 容器 的 高 度 会 突然 变化 ， 还 有 一 种 做 法 就 是 在 
输入 框 的 后 面 显 示 ， 但 是 为 了 让 默认 状态 下 表单 水 平 居中 ， 外 面容 器 的 
宽度 不 是 很 大 ， 因 此 如 果 在 后 面 显示 ， 就 会 有 宽度 不 够 的 问题 。 如 果 我 
们 使 用 “无 依赖 绝对 定位 >， 那 这 个 问题 就 不 再 是 问题 了 。 假 设 提 示 文 字 
内 容 元 素 的 类 名 是 ,remark， 则 有 CSS 代 码 如 下 : 


remark { 
position: absolute; 


margin-left: 10px; 


束 这 么 简 简 单单 的 CSS 代 码 ， 效 果 即 达成 ， 既 在 输入 框 的 后 面 显 
示 ， 又 跳出 了 容 右 宽度 的 限制 ， 同 时 显 隐 和 不 会 影响 原先 的 布局 。 


眼见 为 实 ， 输 入 后 面 的 演示 页 面 地 址 体验 : 
http://demo.cssworld.cn/6/5-6.php。 效果 如 图 6-54 所 示 。 


图 6-54 “无 依赖 绝对 定位 ”提示 信息 布局 示意 


更 为 关键 的 是 ， 提 示 信 息 的 位 置 智 能 跟随 输入 框 。 例 如 ， 我 们 这 里 
把 输入 框 的 宽度 改 小 ， 会 看 到 提示 信息 会 自动 跟着 往 前 走 ， 如 图 6-55 所 
示 。 与 容器 设置 position:relative 再 通过 left 属 性 实现 的 定位 相 
比 ， 其 代码 更 简洁 ， 容 错 性 更 强 ， 维 护 成 本 更 低 。 


此 外 ， 页 面 中 的 星 号 也 是 典型 的 “无 依赖 绝对 定位 >， 目 身 绝对 定 
位 ， 然 后 通过 margin- left 人 负 值 偏 移 实现 ， 从 而 保证 所 有 输入 信息 关 
左 对 齐 ， 同 时 又 不 会 影响 原 移 的 布局 ， 也 吕 是 星 号 有 没有 对 布局 没有 任 
何 影响 。 


3. 下 拉 列 表 的 定位 


在 实现 静态 下 拉 效 果 的 时 候 ， 也 是 可 以 使 用 “无 依赖 绝对 定位 ”的 。 
演示 页 面 地 址 http://demo.cssworld.cn/6/5-7.php 给 出 了 一 个 例子 。 当 我 们 
focus 输 入 框 的 时 候 ， 下 拉 列 表 会 呈现 ， 如 图 6-56 所 示 。 


+ 邮箱 


* 密码 请 输入 6-16 位 密 倘 ， 不 能 使 用 空格 


图 6-55 “无 依赖 绝对 定位 ”智能 跟随 示意 


搜索 结果 3 


搜索 结果 4 


这 索 结果 > 


图 6-56 “无 依赖 绝对 定位 ?下 拉 列 表 效 果 


这 里 ， 这 个 下 拉 列 表 的 定位 采用 的 就 是 “无 依赖 绝对 定位 >， 相 天 
HTML 和 CSS 代 码 如 下 : 


<input> 
<div class="result"> 
<div class="datalist"> 
<a href> 搜 索 结果 1</a> 


</div> 
</div> 
/* 下 拉 列 表 的 无 依赖 绝对 定位 */ 
.datalist { 

position: absolute; 


} 

/* 列表 的 显 隐 控 制 */ 

.Search-result { 
display: none; 


input:focus ~ .search-result { 
display: block; 


就 一 个 position:absolute 就 实现 了 我 们 想 要 的 效果 ， 没 有 
left、top 定 位 ， 父 元 素 也 没有 position:relative 设 定 ， 效 果 就 
达成 了 ， 而 且 兼 容 性 好 到 IE6 都 完美 定位 。 


除了 代码 少 这 个 好 处 外 ， 维 护 成 本 也 在 一 定 程度 上 降低 了 ， 比 方 
说 ， 输 入 框 的 高 度 发 生 了 变化 ， 我 们 不 需要 修改 任何 CSS 代 码 ， 列 表 依 
然 在 输入 框 的 底部 完美 对 齐 显 示 。 不 仅 如 此 ， 没 有 了 父 元 素 
position:relative 限 定 ， 我 们 的 z-index 层级 管理 规则 更 简单 
了 ， 并 且 也 无 须 担心 父 元 素 设置 oveflow:hidden 会 裁剪 下 拉 列 表 。 


不 过 这 里 我 有 必要 补充 一 点 ， 虽 然 “无 依赖 绝对 定位 ?好 处 多 多 ， 但 
建议 只 用 在 静态 交互 效果 上 ， 比 方 说 ， 导 航 二 级 菜单 的 显示 与 定位 。 如 
条 是 动态 呈现 的 列表 ， 建 议 还 是 使 用 JavaScript 来 计算 和 定位 。 


4. 占 位 符 效 果 模 拟 


IE9 及 其 以 下 浏览 器 不 支持 placeholder 占 位 符 效 果 ， 实 际 开发 的 
时 候 ， 针 对 这 些 浏览 器 ， 需 要 进行 模拟 。 比 较 好 的 做 法 是 使 用 <label> 
标签 和 输入 框 关 联 并 覆盖 在 输入 框 上 面 ， 好 处 是 点 击 占 位 文字 输入 框 天 
然 focus， 并 且 不 会 污染 输入 框 的 value 。 


这 里 的 覆盖 效果 也 可 以 使 用 “无 依赖 绝对 定位 ”实现 ， 好 处 是 组 件 化 
的 时 候 适 用 性 更 广 ， 因 为 不 会 对 父 级 元 聚 进行 定位 属性 限制 。 用 下 面 的 
代码 简单 演示 一 下 实现 原理 : 


<label class="placeholder" for="text"> 占 位 符 </label> 
<input id="test"> 

/* 和 输入 框 一 样 的 样式 */ 

.placeholder, input { 


} 

/* 占 位 符 元 素 特有 样式 */ 

.placeholder { 
position: absolute; 


, a 


由 于 “无 依赖 绝对 定位 ”本 质 上 就 十 一 个 不 占据 任何 空间 的 相对 定位 
元 素 ， 因 此 这 里 我 们 让 占 位 符 元 隶 和 输入 框 的 布局 样式 一 模 一 样 ， 再 设 
置 绝对 定位 ， 就 可 以 和 输入 完美 重合 是 位。 当然 有 一 些 样式 是 需要 重 置 
的 ， 比 方 说 ， 输 入 框 经 常会 设置 border 边 框 样式 ， 那 么 我 们 的 占 位 符 
元 素 束 需要 把 边框 闫 色 设 置 成 透明 的 ， 例 如 : 


.placeholder { 
border-color: transparent; 
} 


随 着 时 代 的 进步 和 浏览 万 的 发 展 ， 这 种 占 位 符 效果 模拟 的 场景 会 越 
来 越 少 ， 因 此 这 里 束 不 专门 做 演示 页 面 详细 展开 讲解 了 。 但 是 ,“ 无 依 
赖 绝对 定位 ”的 简约 便捷 以 及 健壮 性 是 显而易见 的 。 


5. 进一步 深入 “无 依赖 绝对 定位 ” 


虽然 说 元 素 position:absolute 后 的 display 计 算 值 都 是 块 状 
的 ， 但 是 其 定位 的 位 置 和 没有 设置 position:absolute 时 候 的 位 置 相 
天 。 举 个 简单 的 例子 ， 有 下 面 两 段 HTML 代 码 : 


<h3> 标 题 <span class="follow">span</span></h3> 


<h3> 标 题 <div class="follow">div</div></h3> 

其 差别 就 在 于 “标题 "文字 后 面 跟 随 的 标签 ， 一 个 是 内 联 的 
<span>， 还 有 一 个 是 块 状 的 <div>， 此 时 ， 显 然 span 字 符 是 跟 在 “ 标 
题 * 后 面 显示 ，div 字 符 则 换行 在 “标题 * 下 面 显 示 ， 这 个 想必 大 家 都 知 
道 。 好 ， 现 在 有 如 下 CSS 代 码 : 


follow { 
position: absolute; 
} 


虽然 此 时 无 论 是 内 联 的 <span> 还 是 块 状 的 <div>， 计 算 值 都 是 
block,， 但 是 它们 的 位 置 还 和 没有 应 用 position:absolute 的 时 候 一 
样 ， 一 个 在 后 面 ， 一 个 在 下 面 ， 如 图 6-57 所 示 。 

标题 span 
标题 


div 


图 6-57 “无 依赖 绝对 定位 ”表现 规则 示意 


假如 HTML 是 下 面 这 样 的 : 


<h3> 标 题 </h3><span class="follow">span</span> 


<h3> 标 题 </h3><div class="follow">div</div> 


那么 由 于 非 绝 对 定位 状态 下 span 和 div 都 在 “标题 "的 下 面 ， 因 此 ， 这 里 
最 后 的 效果 也 同样 是 者 在 “标题 "的 下 面 。 


看 上 去 ,“ 无 依赖 绝对 定位 ”的 定位 原理 还 是 挺 简单 的 ， 但 是 在 实际 
开发 的 时 候 ， 有 时 候 会 遇 到 一 点 问题 。 


首先 ， 正 7 浏览 器 下 ， 块 状 的 <div>“ 无 依赖 绝对 定位 ”的 定位 表现 
如 同 内 联 的 <span>， 也 惑 是 无 论 是 块 级 元 素 还 是 内 联 元 素 ,“ 无 依赖 绝 
对 定位 ”后 部 和 内 联 元 素 一 行 显示 。 若 要 保证 兼容 ， 可 以 在 外 部 套 一 层 
空 的 <div> 标 签 来 维持 原始 的 块 状 竺 性。 不 过 ， 因 为 现在 很 少 需要 兼容 
IE7 浏 览 句 ， 所 以 这 不 算 事 儿 。 


其 次 ， 前 文 提 到 浮动 和 绝对 定位 是 死对头 ， 当 “浮动 "和 “无 依赖 绝 
对 定位 ”相遇 的 时 候 ， 就 会 发 生 一 些 不 愉快 的 事情 。HTML 代 码 如 下 : 


<div class="nav"> 导 航 1</div> 
<img src="new.png" class="follow"> 
<div class="nav"> 导 航 2</div> 


这 里 ,nav 是 一 个 浮动 色 块 ， 相 关 CSS 如 下 : 


.follow { 
position: absolute; 
} 


.Nav { 
width: 100px; 
line-height: 40px; 


background-color: #333,; 
color: #fff; 
text-align: center,; 
float: left; 


结果 在 了 和 Chrome 浏 览 器 下 ， 夹 在 中 间 的 <img> 在 中 间 显 示 ( 见 图 
6-58 上 ) ， 但 是 Firefox 浏 览 器 却 是 在 最 后 显示 ( 见 图 6-58 下 ) 。 


导航 1 导航 2 


导航 1 导航 2 


图 6-58 “浮动 ”和 “无 依赖 绝对 定位 ”不一致 的 表现 


此 处 的 浏览 器 不 一 致 的 行为 表现 应 该 属于 “未 定义 行为 "， 没 有 谁 对 
谁 错 ， 只 是 各 自 按照 自己 的 泻 染 规则 表现 而 已 。Firefox 浏 览 器 下 的 定位 
位 置 或 许 比 较 好 理解 ， 因 为 和 没有 设置 position; absolute 表 现 一 
致 ， 符 合 我 们 对 上 面 规则 的 理解 。 那 为 何 卫 和 Chrome 浏 览 器 却 在 中 间 显 
示 呢 ?我 认为 是 这 样 的 :浏览 器 对 于 DOM 元 素 的 样式 泻 染 是 从 前 往 
后 、 由 外 及 内 的 ， 因 此 渲染 顺序 是 先 “ 导 航 1*"， 再 “图 片 ”"， 最 后 是 “导航 
2”。 当 泻 染 到 “图 片 ”? 的 时 候 ， 由 于 “导航 1” 左 浮动 ， 因 此 内 联 的 图 片 跟 在 


后 面 显 示 ， 此 时 由 于 设置 了 position:absolute， 因 此 当前 位 置 定位 
并 不 占据 任何 空间 ， 再 泻 染 “ 导 航 2” 的 时 候 ， 中 间 的 “图 片 * 基 本 上 跟 不 存 
在 没什么 区 别 ， 因 此 也 就 和 “导航 1” 紧 密 相连 了 ， 最 终 形成 了 “图 片 * 在 中 
间 显 示 的 样式 表现 。 


对 于 上 述 场景 ， 如 果 希 望 各 个 浏览 絮 的 表现 都 古 一 样 的 ，<img> 外 
层 嵌 套 一 层 标签 并 浮动 即 可 ， 注 意 ， 是 外 层 标 签 浮动 。 由 于 浮动 和 绝对 
定位 水 火 不 容 ， 本 喘 设置 浮动 古 没 有 任何 效果 的 。 


6.5.3 absolute 与 text-align 


按 道理 讲 ，absolute 和 float 一 样 ， 都 可 以 让 元 素 块 状 化 ， 应 该 
不 会 受 控 制 内 联 元 素 对 齐 的 text-align 属 性 影响 ， 但 是 最 后 的 结果 却 
出 人 意料 ，text -align 居 然 可 以 改变 absolute 元 素 的 位 置 。 


如 下 简单 的 HTML 和 和 CSS 代码 : 


<p><img src="1.jpg"></p> 


text-align: center; 


} 
img { 
position: absolute; 


在 Chrome 和 Firefox 浏 咒 嚣 下， 图 片 在 中 间 位 置 显示 了 ， 但 十 仅仅 古 在 中 
间 区 域 显示 ， 并 不 是 水 平 居 中 ， 如 果 我 们 给 <p> 设 定 尺 寸 并 添加 背景 
色 ， 束 会 看 到 如 图 6-59 所 示 的 效果 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/6/5-8.php 或 者 扫 下 面 的 
二 维 码 。 


图 6-59 图 片 在 中 间 位 置 开 始 显示 


虽然 本 示例 中 图 片 位 置 确实 受 text -align 属 性 影响 ， 但 是 并 不 是 
text-align 和 absolute 元 素 直 接 发 生 关 系 ，absolute 元 素 的 
display 计 算 值 是 块 状 的 ，text-align 是 不 会 有 作用 的 。 这 里 之 所 以 
产生 了 位 置 变化 ， 本 质 上 是 “幽灵 空白 节点 >” 和 “无 依赖 绝对 定位 ?共同 作 
用 的 结果 。 


具体 的 泻 染 原 理 如 下 。 


(1) 由 于 <img> 是 内 联 水 平 ，<p> 标 签 中 存在 一 个 视 度 为 09、 看 不 
见 摸 不 着 的 “幽灵 至 日 节点 ”， 也 十 内 联 水 平 ， 于 是 受 text- 


有 昌 : 


align:center 影 响 而 水 平 居 中 显示 。 


(2) <img> 设 置 了 position:absolute， 表 现 为 “无 依赖 绝对 定 
位 ”， 因 此 在 “幽灵 空白 节点 ”后 面 定位 显示 ; 同时 由 于 图 片 不 占据 空 
司 ， 这 里 的 “幽灵 空白 节点 ”当仁不让 ， 正 好 在 <p> 元 素 水 平 中 心 位 置 显 
示 ， 于 是 我 们 就 看 到 了 图 片 从 <p> 元 素 水 平 中 间 位 置 显 示 的 效果 。 


这 是 非常 简约 的 定位 表现 。 此 时 ， 我 们 只 要 margin-1left 一 半 图 
宽度 负 值 大 小 ， 就 可 以 实现 图 片 的 水 平 居 中 效果 了 ， 与 父 元 素 

position:relative 然 后 定位 元 素 设置 left :50% 的 方法 相 比 ， 其 优 

势 在 于 不 需要 改变 父 元 素 的 定位 属性 ， 避 免 可 能 不 希望 出 现 的 层级 问题 


从 。 
= 于 


然而 ， 正 浏览 器 的 文 持 不 一 样 导致 此 方法 的 场景 实用 性 打 了 折扣 。 
当然 ， 有 小 技巧 可 以 使 所 有 浏 吕 器 痢 完美 文 持 ， 如 有 果 只 需要 兼容 IE Edge 
(移动 端 开发 时 候 )， 额 外 加 下 面 这 一 段 CSS 语 句 就 可 以 了 : 


p:before { 
content: '';， 


如 果 和 希望 兼容 下 8 浏览 器 ， 则 CSS 代 人 码 还 要 再 多 一 点 儿 : 


pi 
text-align: center ; 
font-size: .1px; 
font-size: -webkit-calc(1px - 1px); 


} 
p:before { 


content: '\2002'， 


} 
img { 
position: absolute,; 


其 中 ，\2002 表 示 某 一 种 空格 。 通 过 插入 显 式 的 内 联 字符 ， 而 非 借 
助 飘 渺 的 “幽灵 空白 节点 ”实现 所 有 浏览 器 下 的 一 臻 表现。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/6/5-9.php 或 者 扫 右 侧 的 
二 维 码 。 


需要 注意 的 是 ， 只 有 原本 是 内 联 水 平 的 元 素 绝对 定位 后 可 以 受 
text- align 属 性 影响 ， 这 不 难 理解 ， 因 为 块 级 元 素 的 “无 依赖 绝对 定 
位 ”是 掉 在 下 面 显示 的 ， 水 平方 向 上 并 无 可 “依赖 ”的 内 联 元 素 ，text- 
align 属 性 自然 其 长 莫 及 。 


按照 我 的 经 验 ， 利 用 text -align 控 制 absolLute 元 素 的 定位 最 适 
合 的 使 用 场景 就 是 主 窗 体 右 侧 的 “返回 顶部 ”以 及 “反馈 ”等 小 布局 的 实 
现 。 例 如 ，http://demo. cssworld.cn/6/5-10.php 对 应 的 实例 页 面 效 果 ， 核 
心 区 域 如 图 6-60 所 示 。 图 6-60 所 示 的 效果 的 核心 HTML 和 和 CSS 代码 如 下 : 


@ 
S 


图 6-60” 主 结构 右 外 侧 固 定 定 位 布局 示意 


<div class="alignright"> 
<span class="follow"></span> 
</div> 
.alignright { 
height: 0; 
text-align: right; 
overflow: hidden， 


} 
.alignright:before { 
content: "\2002",，; 


} 

.follow { 
position: fixed; 
bottom: 100px; 
z-index: 1; 


} 


使 用 :before 伪 元 素 在 前 面 插 入 一 个 空格 ， 此 时 .alignright 设 
置 text-align:right， 则 此 空格 对 齐 主 结构 的 右边 缘 显 示 ， 后 面 的 
固定 定位 元 素 ( 同 绝对 定位 元 素 ) 由 于 “无 依赖 定位 ”特性 ， 左 边缘 正 好 
就 是 主 结构 的 右边 缘 ， 天 然 跑 到 主 结构 的 外 面 显示 了 ， 而 这 个 效果 正 是 
固定 在 右 下 和 角 的 “返回 顶部 ”以 及 “反馈 ”小 按钮 布局 需要 的 效果 。 


此 方法 兼容 性 很 好 ， 层 级 单纯 ， 唯 一 的 问题 就 是 插入 了 一 个 空格 ， 
会 占据 一 定 的 高 度 ， 这 是 不 推荐 的 ， 最 好 就 是 有 没有 “返回 顶部 ”等 元 素 
都 不 影响 主 结构 的 布局 。 所 以 ， 我 们 要 把 占据 的 高 度 抹 掉 ， 方 法 很 简 
单 ， 设 置 height: 0 同时 overflow:hidden 即 可 。 


此 时 ， 有 人 可 能 会 惊 呼 : 什么 ? 设置 height :0 同时 
overflow:hidden? 那 则 不 是 里 面 所 有 元 素 都 被 剪裁 看 不 见 啦 ? 


如 果 是 普通 元 素 确实 会 如 此 ， 但 是 对 于 absolute 绝 对 定位 以 及 
fixed 固 定 定位 元 素 ， 规 则 要 更 复杂 ! 


6.6 ” absolute 与 overflow 


overf1low 对 absolute 元 素 的 剪裁 规则 用 一 句 话 表 述 就 是 : 绝对 
定位 元 素 不 总 是 被 父 级 overflow 属 性 剪裁 ， 尤 其 当 overflow 在 绝对 
定位 元 素 及 其 包含 块 之 间 的 时 候 。 


上 面 这 人 句 话 是 官方 文档 的 直译 ， 似 乎 还 是 有 些 抛 口 ， 我 们 再 换 一 种 
方法 表述 就 是 : 如 果 overf1ow 不 是 定位 元 素 ， 同 时 绝对 定位 元 素 和 
overflow 容 器 之 间 也 没有 定位 元 素 ， 则 overflow 无 法 对 absolute 
元 素 进行 剪裁 。 


因此 下 面 HIML 中 的 图 片 不 会 被 剪裁 : 


<div style="overflow: hidden;"> 


<img src="1.jpg" style="position: absolute;"> 
</div> 


overf1ow 元 素 父 级 是 定位 元 素 也 不 会 剪裁 ， 例 如 : 


<div style="position: relative;"> 
<div style="overflow: hidden;"> 


<img src="1.jpg" style="position: absolute;"> 


</div> 
</div> 


但 是 ， 如 采 overflow 属 性 所 在 的 元 素 同 时 也 是 定位 元 素 ， 里 面 的 
绝对 定位 元 素 会 被 剪裁 : 


<div style="overflow: hidden; position: relative;"> 


<img src="1.jpg" style="position: absolute;"> <!-- 剪裁 --> 
</div> 


如 果 overf1ow 元 素 和 绝对 定位 元 素 之 间 有 定位 元 素 ， 也 会 被 剪 
裁 : 


<div style="overflow: hidden; "> 
<div style="position: relative;"> 
<img src="1.jpg" style="position: absolute;"> <!-- 剪裁 --> 
</div> 
</div> 


如 果 overflow 的 属性 值 不 是 nidden 而 是 auto 或 者 scrol1l1， 即 
使 绝对 定位 元 素 高 宽 比 overf1low 元 素 高 宽 还 要 大 ， 也 都 不 会 出 现 滚 动 
条 。 例 如 ， 下 面 的 HTML 和 和 CSS 代码: 


<div class="box"> 
<img src="1.jpg"> 

</div> 

.box 1 
width: 300px; height: 100px; 
background-color: #fof3f9 ; 
overflow: auto; 


.box > img { 
width: 256px; height: 192px; 
position: absolute; 


} 


图 片 高 度 256px 比 容器 . box 高 度 100px 明 显 高 出 了 一 截 ， 但 是 ， 
没有 滚动 条 出 现 。 


实际 开发 的 时 候 ， 绝 对 定位 元 素 和 非 绝 对 定位 元 素 往往 可 能 混杂 在 
一 起 ， 虽 然 绝 对 定位 元 素 不 能 让 滚动 条 出 现 ， 但 是 非 绝 对 定位 元 素 可 
以 ， 于 是 ， 就 可 能 出 现 另 外 一 种 很 有 特色 的 现象 ， 即 当 容 需 滚动 的 时 
候 ， 绝 对 定位 元 素 微 丝 不 动 ， 不 跟着 滚动 ， 表 现 类 似 fixed 固 定 定位 ， 
如 图 6-61 所 示 ， 深 动 到 头 和 滚动 到 尾 ， 图 片 的 位 置 都 是 一 样 的 。 有 眼见 为 
实 ， 手 动 输入 http://demo.cssworld.cn/6/5-11.php 或 者 扫 下 面 的 二 维 码 。 


图 6-61 绝对 定位 元 素 不 跟随 滚动 示意 


最 后 ， 非 常 有 必要 补充 一 点 ， 那 束 是 由 于 position:fixed 固 定 
定位 元 素 的 包含 块 是 根 元 素 ， 因 此 ， 除 非 是 窗 体 滚动 ， 否 则 上 面 讨论 的 
所 有 overf1ow 剪 裁 规 则 对 固定 定位 都 不 适用 。 这 一 点 后 面 还 会 所 及 。 


了 解 这 些 特性 有 什么 用 呢 ? 


作用 一 是 解决 实际 问题 。 例 如 上 一 市 最 后 “返回 顶部 ”的 案例 ， 保 证 
高 度 为 9， 同 时 里 面 的 定位 内 容 不 会 被 剪裁 ， 或 者 在 局 部 滚动 的 容 希 中 
模拟 近似 position:fixed 的 效 末 。 作 用 二 是 在 遇 到 类 似 现象 的 时 候 
知道 问题 所 在 ， 可 以 “对 症 下 药 ”， 快 速 解决 问题 。 


然而 ， 昌 然 实际 开发 的 时 候 ， 对 于 局 部 滚动 ， 我 们 经 常会 有 元 素 不 
跟随 滚动 的 需求 ， 如 表 头 固定 ， 但 是 从 可 维护 性 的 角度 讲 ， 建 议 还 是 将 
这 个 表 头 元 素 移 动 到 滚动 容器 外 进行 模拟 ， 因 为 我 们 总 会 不 小 心 在 某 一 
层 标 签 添 加 个 类 似 position:relative 的 声明 ， 此 时 ， 原 本 的 不 跟随 
滚动 的 表 头 会 因为 包含 块 的 变化 变 得 可 以 滚动 了 ， 这 显然 是 我 们 不 愿意 
看 到 的 。 当 然 ， 如 果 HITML 结 构 被 限制 无 法 修改 ， 则 利用 overf1low 滚 
动 absolute 元 素 不 滚动 的 特性 来 实现 表 头 固定 的 效果 则 是 上 上 之 选 ， 
会 让 人 眼前 一 亮 ! 


在 CSS 世 界 中 ， 上 面 说 的 这 些 几乎 都 是 完美 无 瑕 的 ， 但 是 ， 随 着 
CSS3 新 世界 到 来 的 冲击 ， 规 则 在 不 经 意 间 发 生 了 一 些 变化 ， 其 中 最 明显 
的 就 是 transform 属 性 对 overf1Low 剪 裁 规则 的 影响 ，CSS3 新 世界 中 
transform 属 性 似乎 扮演 了 原本 “定位 元 素 * 的 角色 ， 但 是 这 种 角色 扮 
演 并 不 完全 。 什 么 意思 呢 ? 我 们 先 看 下 面 我 统计 的 出 现 transform 属 
性 时 overf1Low 剪 裁 绝 对 定位 元 素 的 数据 。 


overf1ow 元 素 自 身 transform: 


。 IE9 及 以 上 版 本 浏览 器 、EFirefox 和 Safari (OS X、iOS) 剪裁 ; 
。 Chrome 和 Opera 不 剪裁 。 


overflow 子 元 素 transform: 


。IE9 及 以 上 版 本 浏览 器 、Firefox 和 Safari (OS X、iOS) 剪裁; 
。 Chrome 和 Opera 剪 裁 。 


可 以 看 到 overflow 元 素 自 身 transform 的 时 候 ，Chrome 和 Opera 
浏览 器 下 的 overflow 剪 裁 是 无 效 的 ， 这 是 唯一 和 有 定位 属性 时 的 
overf1ow 剪 裁 不 一 样 的 地 方 ， 因 此 才 有 “角色 扮演 并 不 完全 ”的 说 法 。 


transform 除 了 改变 overf1low 属 性 原 有 规则 ， 对 层 琶 上 下 文 以 及 
position:fixed 的 泻 染 都 有 影响 。 因 此 ， 当 大 家 过 到 absolute 元 素 
被 剪裁 或 者 fixed 固 定 定 位 失效 时 ， 可 以 看 看 是 不 是 transform 属 性 
在 作 尝 。 


6.7 absolute 与 clip 


CSS 世 界 中 有 些 属性 或 者 特性 必须 和 其 他 属性 一 起 使 用 才 有 效 ， 比 
方 说 剪裁 属性 clip。clip 属 性 要 想起 作用 ， 元 素 必 须 是 绝对 定位 或 者 
固定 定位 ， 也 就 是 position 属 性 值 必须 是 absolLute 或 者 fixed。 


clip 属 性 语法 如 下 : 


实际 上 ， 标 准 语法 应 该 是 : 
clip: rect(top, right, bottom, left) 


但 是 我 个 人 还 是 习惯 使 用 没有 逗号 的 语法 ， 因 为 其 兼容 性 更 好 ， 
IE6 和 IE7 也 文 持 ， 而 且 字符 更 少 。 


就 顺序 而 言 ，top~>right-bottom-1left 在 CSS 世 界 中 是 一 脉 相 
承 的 ， 和 margin/ border-width 等 属性 的 4 个 值 的 顺序 一 样 ， 都 是 从 
top 开 始 ， 顺 时 针 旋 转 。 不 过 这 里 的 4 个 值 有 一 个 明显 不 一 样 的 地 方 ， 
就 是 不 能 缩写 ， 且 和 border -width 类 似 ， 是 不 支持 百分比 值 的 。 


那 具体 是 如 何 藤 裁 的 呢 ? 我 们 看 一 个 例子 ，CSS 如 下 : 


clip: rect(30px 200px 200px 20px) 


可 以 想象 ， 我 们 手中 有 一 把 剪刀， 面前 有 一 块 画布 ，rect (30px 
200px 200px 20px ) 表 示 的 含义 束 是 :距离 画布 上 边 绿 30px 的 地 方 
剪 一刀， 距离 画布 右边 缘 200px 的 地 方 剪 一刀 ， 距 离 画 布下 边缘 200px 
的 地 方 剪 一刀， 距离 画布 左边 缘 20px 的 地 方 前 一刀。 最 终 我 们 就 得 到 
一 个 新 的 剪裁 好 的 矩形 画布 ， 如 图 6-62 所 示 。 


图 6-62 ”画布 剪裁 示意 


6.7.1 重新 认识 的 clip 属 性 


非常 多 的 人 都 不 知道 CSS$ 中 还 有 抱 大 腿 的 c1ip 和 剪裁 属性 ， 束 算 见 
到 ， 也 认为 它 是 一 个 非常 冷门 、 生 俱 的 CSS 属性 ， 作 用 和 价值 不 大 。 实 
际 上 ，c1lip 和 甬 裁 非常 有 用 ， 在 以 下 两 种 场景 下 具有 不 可 替代 的 地 位 。 


1. fixed 固 定 定位 的 剪裁 


对 于 普通 元 素 或 者 绝对 定位 元 素 ， 想 要 对 其 进行 剪裁 ， 我 们 可 以 利 
用 语义 更 明显 的 overflow 属 性 ， 但 是 对 于 position:fixed 元 素 ， 
overflow 属 性 往往 就 力 不 能 及 了 ， 因 为 fixed 固 定 定位 元 素 的 包含 块 
是 根 元 素 ， 除 非 是 根 元 素 滚动 条 ， 普 通 元 素 的 overf1low 是 根本 无 法 对 
其 进行 剪裁 的 。 怎 么 办 呢 ? 


此 时 吏 要 用 到 名 不 经 传 的 cLip 属 性 了 。 再 足 张 的 固定 定位 ，c1lip 
属性 也 能 立马 将 它 剪 裁 得 服 服 帖 帖 的 。 例如; 


.fixed-clip { 
position: fixed; 


clip: rect(30px 200px 200px 20px); 
} 


2. 最 佳 可 访问 性 隐藏 


所 谓 “ 可 访问 性 隐藏 >， 指 的 是 虽然 内 容 肉眼 看 不 见 ， 但 是 其 他 辅助 
设备 却 能 够 进行 识别 和 访问 的 隐藏 。 


举 个 例子 ， 很 多 网 站 左上 角 都 有 包含 自己 网 站 名 称 的 标识 
(logo) ， 而 这 些 标识 一 般 都 是 图 片 ， 为 了 更 好 地 SEO 以 及 无 障碍 识 
别 ， 我 们 一 般 会 使 用 <h1> 标 签 写 上 网 站 的 名 称 ， 代 码 如 下 : 


<a href="/" class="]10go"> 


<h1>CSS 世 界 </h1L> 
</a> 


如 何 隐藏 <h1> 标 等 中 的 “CSS 世 界 ” 这 几 个 文字 ， 通 前 有 以 下 一 些 技 
术 选 型 。 


。 下 策 是 display:none 或 者 visibility:hidden 隐 藏 ， 因 为 屏 
幕 阅读 设备 会 忽略 这 里 的 文字 。 

。 text- indent 缩 进 是 中 策 但 文字 如 有 果 缩 进 过 大 ， 大 到 屏幕 之 
外 ， 屏 幕 阅读 设备 也 是 不 会 读 取 的 。 

。 Ccolor :transparent 是 移动 端 柴 ， 但 却 是 桌面 端 中 案 ， 因 为 原 
生 IE8 浏 览 器 并 不 支持 它 。color :transparent 声 明 ， 很 难 用 简 
单 的 方式 阻止 文本 被 框 选 。 

。 C1ip 剪 裁 隐藏 是 上 策 ， 既 满足 视觉 上 的 隐藏 ， 屏 幕 阅读 设备 等 畏 
助 设备 也 支持 得 很 好 。 


,10go hi { 
position: absolute; 


clip: rect(0 0 0 0); 
} 


cl1ip 剪 裁 被 我 称 为 “最 佳 可 访问 性 隐藏 "的 另外 一 个 原因 就 是 ， 它 
具有 更 强 的 普遍 适应 性 ， 任 何 元 素 、 任 何 场景 都 可 以 无 障碍 使 用 。 例 
如 ， 我 定义 一 个 如 下 的 CSS 语 句 块 : 


.Clip { 
position: absolute,; 


clip: rect(0 0 0 0); 


束 可 以 整 站 使 用 ， 哪 里 需要 “可 访问 性 隐藏 * 束 加 一 个 类 名 .clip 即 可 ， 
无 论 是 图 片 、 文 字 还 是 块 级 元 素 ， 都 可 以 满足 隐藏 需求 〈 与 文字 透明 、 
缩 进 等 方法 相 比 ) 。 同 时 ，c1lip 语 法 简单 ， 功 能 单一 ， 与 其 他 CSS 属 性 
相 比 ， 和 元 素 原 本 CSS 样 式 冲突 的 概率 更 低 。 

不 仅 如 此 ， 元 素 原 本 的 行为 特性 也 很 好 用 。 例 如 ， 依 然 可 以 被 


focus， 而 且 非 常 难得 的 是 束 地 甬 裁 ， 因 为 属于 “无 依赖 的 绝对 定位 ”。 
这 一 点 很 重要 ， 我 们 来 看 下 面 这 个 实用 案例 。 


众所周知 ， 如 果 <form> 表 单元 素 里 面 有 一 个 type 为 submit 或 者 
image 类 型 的 按钮 ， 那 么 表单 自动 有 回 车 提交 行为 ， 可 以 节约 大 量 吧 唆 
的 键盘 相关 的 事件 的 代码 。 但 是 ，submit 类 型 按钮 在 IE7 下 有 黑 框 ， 很 
难 所 有 浏览 器 (包括 Firefox 在 内 的 浏览 器 ) UI 完 全 一 致 ， 对 视觉 呈现 是 
个 一 挑战 。 于 是 就 有 了 下 面 这 个 使 用 <Labe1> 元 素 李 代 桃 僵 的 经 典 策 
上 : 


<form> 
<input type="submit" id="someID" class="clip"> 


<label for="someID"> 提 交 </label> 
</form> 


原本 的 submit 按 钮 隐藏 ， 肉 眼 所 见 的 按钮 UI 实际 上 是 <labe1l> 标 
等 泻 染 。 由 于 <labe1l> 是 非 蔡 换 元 素 ， 没 有 内 置 的 UI， 因 此 兼容 性 非 汝 
好 


这 里 使 用 的 c1Lip 甬 裁 隐藏 是 我 工作 这 么 多 年 大 浊 淘 沙 筛选 后 的 最 
佳 实践 ， 有 对 比 才能 显 出 好 在 何 处 。 


。 display:none 或 者 visibility:hidden 隐藏 有 两 个 问题 ， 一 
个 是 按钮 无 法 被 focus 了 ， 男 外 一 个 是 IE8 浏 览 器 下 提交 行为 丢 
失 ， 原 因应 该 与 按钮 focus 特 性 丢失 有 关 。 

透明 度 0 履 盖 也 是 一 个 不 错 的 实践 。 如 果 是 移动 端 项 目 ， 建 议 这 么 
做 ; 但 如 果 是 桌面 端 项 目 ， 则 完全 没有 必要 。 使 用 透明 度 0 履 盖 的 
问题 是 每 一 个 场景 都 需要 根据 环境 的 不 同 重新 定位 ， 以 保证 点 击 区 
域 的 准确 性 ， 成 本 较 高 ， 但 cLip 隐 藏 直接 用 一 个 类 名 加 一 下 就 

好 。 

还 有 一 种 比较 具有 适用 性 的 “可 访问 隐藏 "是 下 面 这 种 屏幕 外 隐藏 


.abs-out { 
position: absolute; 


left: -999px; top: -999px; 
} 


然而 ， 在 本 例 中 ， 会 出 现 一 个 比较 秦 烦 的 问题 。 在 6.4 市 讲 过 ， 当 一 
个 控件 元 素 被 focus 的 时 候 ， 浏 览 器 会 目 动 改变 深 动 蜗 度 ， 让 这 个 控件 
元 素 在 屏幕 内 显示 。 假 如 说 我 们 的 <label>“ 提 交 ” 按 钮 在 第 二 屏 ， 则 点 
击 按钮 的 时 候 浏 蜗 右 会 目 动 跳 到 第 一 屏 莘 项 ， 因 为 按钮 隐藏 在 了 屏 攻 
外 ， 于 古 发 生 了 非常 糟 料 的 体验 问题 。 而 clip 束 地 藤 裁 ， 束 不 会 有 “页 


面 跳动 ”的 体验 问题 。 于 是 ， 权 衡 成 本 和 效果 ，clip 隐 藏 成 为 了 最 佳 选 
择 ， 特 别 是 对 于 肥 面 问 项 目 。 


6.7.2 ”深入 了 解 clLip 的 演 染 


上 上面 天 于 clip 的 知识 多 浮 于 表层 ， 如 来 我 们 进一步 深入 ， 去 竹 试 
了 解 clip 属 性 是 如 何 演 染 的 ， 束 会 发 现 一 些 有 意思 的 事情 ! 


我 们 先 看 一 个 示例 : 


.box 1 
width: 300px; height: 100px; 
background-color: #fOf3f9; 
position: relative; 
overflow: auto,; 


.box > img { 
width: 256px; height: 192px; 
position: absolute; 


} 


此 时 .box 为 定位 元 素 ， 因 此 ， 深 动 条 显示 得 很 好 ， 如 图 6-63 所 示 。 


如 果 对 图 片 进行 clip 草 裁 ， 那 效果 又 将 皇 样 呢 ? 


,box > img { 
width: 256px; height: 192px; 


position: absolute; 
clip: rect(0 0 ©0 0); 


} 


图 片 显 然 看 不 见 了 ， 但 是 注意 ， 在 Chrome 浏 览 器 下 ，. box 元 素 的 
深 动 条 依旧 存在 ， 如 图 6-64 所 示 。 


图 6-63 ”绝对 定位 图 片 可 滚动 


图 6-64 Chrome 下 绝对 定位 图 片 cLip 隐 藏 后 依旧 可 滚动 


个 现象 很 有 意思 ， 它 说 明 ， 至 少 在 Chrome 浏 顺 嚣 下，c1ip 仅 仅 
ee 是 可 见 的 ， 对 于 原来 占据 的 空间 并 无 影响 。 然 而 ， 并 
不 是 所 有 浏览 器 都 这 么 认为 ， 在 IE 和 Firefox 浏 贤 器 下 是 没有 深 动 条 的 ， 
只 有 光秃秃 的 一 人 小报 背景 色 在 那里 。 这 又 是 “未 定义 行为 ”的 表现 ， 看 起 
来 EE 和 Firefox 对 于 clip 演 染 采 用 的 是 另外 的 方式 。 


但 是 无 论 怎样 ， 下 面 这 些 特性 大 家 的 认识 都 是 一 致 的 :使 用 clip 
进行 剪裁 的 元 素 其 clientwidth 和 clientHeight 包 括 样 式 计 算 的 宽 
高 都 还 是 原来 的 大 小 ， 从 这 一 点 看 ，Chrome 的 泻 染 似乎 更 合理 。 虽 然 尺 
寸 还 是 原来 的 尺寸 ， 但是， 隐藏 的 区 域 是 无 法 影响 我 们 的 点 击 行为 的 ， 
说 明 c1ip 隐 藏 还 是 很 干脆 的 。 


最 后 总 结 一 下 : clip 隐藏 仅仅 是 决定 了 哪 部 分 是 可 见 的 ， 非 可 见 

分 无 法 啊 应 点 击 事件 等 ， 然 后 ， 虽 然 视 觉 上 隐藏 ， 但 是 元 素 的 尺寸 依 
然 是 原本 的 尺 十 在 下 浏览 器 和 Firefox 浏 览 器 下 抹 挥 了 不 可 见 区 域 尺 寸 
对 布局 的 影响 ，Chrome 浏 览 器 却 保留 了 。 


Chrome 浏 名 右 的 这 种 特性 表现 实际 上 让 clip 隐 藏 有 了 瑕 狐 ， 好 在 
通常 使 用 场景 是 看 不 到 这 个 差异 的 ， 故 影响 其 微 。 


6.8 ”absolute 的 流体 特性 


6.8.1 当 absolute 遇 到 left/top/right/bottom 属 性 


当 absolute 遇 到 left/top/right/bottom 属 性 的 时 候 ， 
absolute 元 素 才 真正 变 成 绝对 定位 元 素 。 例 如 : 
.box 1 


position: absolute; 
left: 0; top: 0; 


} 


表示 相对 于 绝对 定位 元 素 包 含 块 的 左上 角 对 齐 ， 此 时 原本 的 相对 特性 丢 
失 。 但 是 ， 如 果 我 们 仅 设置 了 一 个 方向 的 绝对 定位 ， 又 会 如 何 呢 ? 例 
如 : 


.box { 
position: absolute; 
left: 0; 

} 


此 时 ， 水 平方 向 绝对 定位 ， 但 垂直 方 回 的 定位 依然 保持 了 相对 特性 。 
6.8.2 ” absolute 的 流体 特性 


说 到 流体 特性 ， 我 们 通 稼 第 一 反应 吏 是 <div> 之 类 的 普通 块 级 元 
素 。 实 际 上 ， 绝 对 定位 元 素 也 具有 类 似 的 流体 特性 ， 当 然 ， 不 是 默认 惑 
有 的 ， 而 是 在 特定 条 件 下 才 具 有 ， 这 个 条 件 束 是 “对 立方 向 同时 发 生 定 
位 的 时 候 ”。 


left/top/right/bottom 是 具有 定位 特性 元 素 专 用 的 CSS 属 
性 ， 其 中 Left 和 right 属 于 水 平 对 立定 位 方向 ， 而 top 和 bottom 属 于 
垂直 对 立定 位 方向 。 


当 一 个 绝对 定位 元 素 ， 其 对 立定 位 方向 属性 同时 有 具体 定位 数值 的 
时 候 ， 流 体 特性 就 发 生 了 。 例 如 : 


<div class="box"></div> 
.box 1 


position: absolute,; 
left: 0; right: 090; 


如 果 只 有 left 属 性 或 者 只 有 right 属 性 ， 则 由 于 包 于 性 ， 此 
时 .box 宽 度 是 0。 但 是 在 本 例 中 ， 因 为 left 和 right 同 时 存在 ， 所 以 
宽度 就 不 是 90， 而 是 表现 为 “格式 化 宽度 ”"， 宽 度 大 小 自 适应 于 .box 包含 
块 的 padding box， 也 就 是 说 ， 如 果 包 舍 块 padding box 宽 度 发 生变 
化 ，,.box 的 宽度 也 会 跟着 一 起 变 。 


因此 ， 假 设 .box 元 素 的 包含 块 是 根 元 素 ， 则 下 面 的 代码 可 以 
让 .box 元 素 正 好 完全 禾 盖 浏览 器 的 可 视窗 口 ， 并 且 如 果 改 变 浏览 器 窗 
口 大 小 ，. box 会 目 动 跟着 一 起 变化 : 


.box 1 
position: absolute; 


left: 0; right: 0; top: 0; bottom: 0; 


绝对 定位 元 素 的 这 种 流体 目 适 应 特性 从 IE7 束 开始 支持 了 ， 但 是 出 
于 历史 习惯 或 者 其 他 什么 原因 ， 很 多 同行 依然 使 用 下 面 这 样 的 写法 : 


,box 1 
position: absolute; 
left: 0; top: 0; 


width: 100%; height: 100%; 


} 


好 像 也 能 覆盖 浏览 器 的 可 视窗 口 ， 并 且 用 得 挺 好 。 那 问题 来 了 : 
两 种 实现 有 什么 区 别 呢 ? 


乍 一 看 ， 效 果 都 是 一 样 的 ， 但 是 骨子里 却 已 经 严重 分 化 了 。 后 者 ， 
也 束 是 设 定 宽 高 都 是 100% 的 那个 .box， 实 际 上 已 经 完全 丧失 了 流动 
性 ， 我 们 可 以 通过 添加 简单 的 CSS 声 明 让 大 家 一 眼 就 看 出 差别 。 例 如 ， 
对 两 者 都 添加 padding :30px: 


.box 1 
position: absolute; 
left: 0; right: 0; top: 0; bottom: 0; 
padding: 30px; 


} 
.box 1 
position: absolute; 
left: 0; top: 0; 
width: 100%; height: 100%; 
padding: 30px; 


前 者 此 时 宽 高 依然 是 窗 体 可 视 区 域 的 宽 高 ， 但 是 ， 后 者 此 时 的 尺寸 是 
100%+60px， 多 出 了 60px。 有 人 可 能 会 立马 想到 使 用 box- 
sizing:border-box， 这 样 确实 可 以 让 padding 表 现 保持 一 致 ， 但 
是 ， 如 果 添 加 的 是 margin:30px 呢 ? 


.box 1 
position: absolute; 
left: 0; right: 0; top: 0; bottom: 0; 
margin: 30px; 


} 
.box 1 
position: absolute; 


left: 0; top: 0; 
width: 100%; height: 100%; 
margin: 30px; 


前 者 自动 上 下 左右 留 白 306px， 但 是 后 者 的 布局 已 经 跑 到 窗 体 外 面 
去 了 ， 并 不 支持 margin box 的 box-sizing 此 时 也 无 能 为 力 。 


通过 上 面 几 个 例子 可 以 看 到 ， 设 置 了 对 立定 位 属性 的 绝对 定位 元 素 
的 表现 神似 普通 的 <div> 元 素 ， 无 论 设 置 padding 还 是 margin， 其 占 
据 的 空间 一 直 不 变 ， 变 化 的 就 是 content box 的 尺寸 ， 这 就 是 典型 的 流体 
表现 特性 。 


所 以 ， 如 采 想 让 绝对 定位 元 素 宽 高 目 适应 于 包含 块 ， 没 有 理由 不 使 
用 流体 特性 写法 ， 除 非 是 奉 换 元 素 的 拉 伸 。 而 绝对 定位 元 素 的 这 种 流体 
特性 比 普通 元 素 要 更 强大 ， 普 通 元 素 流 体 特性 只 有 一 个 方 同 ， 默 认 古 水 
平方 向 ， 但 是 绝对 定位 元 素 可 以 让 垂直 方向 和 水 平方 向 同时 保持 流动 
人 


有 人 可 能 还 没 意 识 到 垂直 方向 也 保持 流动 性 的 好 处 ， 实 际 上 ， 其 对 
我 们 的 布局 非常 有 价值 。 举 个 最 简单 的 例子 ， 因 为 子 元 素 的 height 百 

分 比值 可 以 生效 了 (IE8 及 以 上 版 本 浏览 器 ) ， 所 以 高 度 自 适应 、 高 度 
等 比例 布局 等 效果 都 可 以 从 容 实 现 了 。 


6.8.3 absolute 的 margin:auto 居 中 


当 绝对 定位 元 素 处 于 流体 状态 的 时 候 ， 各 个 盒 模型 相关 属性 的 解析 
和 普通 流体 元 素 都 是 一 模 一 样 的 ，margin 负 值 可 以 让 元 素 的 尺寸 更 
大 ， 并 且 可 以 使 用 margin:auto 让 绝对 定位 元 素 保持 居中 。 


绝对 定位 元 素 的 margin:auto 的 填充 规则 和 普通 流体 元 素 的 一 模 
一 外 让: 
。 如 果 一 侧 定 值 ， 一 侧 auto，auto 为 剩余 空间 大 小 ; 
。 如 果 两 侧 均 是 auto， 则 平分 剩余 空间 。 


唯一 的 区 别 在 于 ， 绝 对 定位 元 素 margin:auto 居 中 从 IE8 浏 览 器 开 
始 支持 ， 而 普通 元 素 的 margin:auto 居 中 很 早 就 支持 了 。 


如 果 项 目 不 需 要 管 下 7 浏览 右 的 话 ， 下 面 这 种 绝对 定位 元 聚 水 平王 
直 居 中 用 法 束 可 以 直接 淘汰 了 : 


.element { 
width: 300px; height: 200px; 
position: absolute; left: 50%; top: 50%; 


margin-left: -150px; /* 宽度 的 一 半 */ 
margin-top: -100px; /* 高 度 的 一 半 */ 
} 


如 果 绝 对 定位 元 素 的 尺寸 是 已 知 的 ， 也 没有 必要 使 用 下 面 这 种 用 
法 ， 因 为 按照 我 的 经 验 ， 在 有 些 场 景 下 ， 百 分 比 transform 会 让 iOS 筑 
信 闪 退 ， 还 是 尽量 避免 的 好 。 


.element { 
width: 300px; height: 200px; 


position: absolute; left: 50%; top: 50%; 
transform: translate(-50%, -50%); /* 50% 为 自 


首 推 的 方法 就 是 利用 绝对 定位 元 素 的 流体 特性 和 margin:auto 的 
自动 分 配 特性 实现 居中 ， 例 如 : 


.element { 
width: 300px; height: 200px; 


position: absolute; 
left: 0; right: 0; top: 0; bottom: 0; 
margin: auto; 


} 


具体 分 配 细 区 在 4.3 节 已 经 详细 解释 ， 这 里 不 再 资 述 。 


我 可 以 负责 任 地 告诉 大 家 ， 这 种 方法 非常 好 用 ， 屡 试 不 夹 。 


6.9 position:relative 才 是 大 哥 


如 果 说 float 和 absolute 是 同 父 异 母 的 兄弟 关系 ， 那 么 
position:relative (下 面 简称 relative) 则 是 absolute 的 亲 大 


哥 。 


故事 是 这 样 的 ， 当 年 魔界 圣母 position 生 了 好 几 个 儿子 ， 其 中 一 
个 就 是 法 力 很 强 也 很 霸道 的 absolute， 考 虚 到 日 后 absolute 会 找 
float 的 麻烦 而 去 正常 流 世 界 ， 以 其 个 性 和 霸道 的 能 力 ， 一 定 会 影响 正 
常 流 世界 的 秩序 ， 于 是 圣母 position 计 其 性 格 敦 实 的 大 儿子 
relative 直 接 在 正常 流 世 界 生 活 ， 帮 忙 盯 着 absolute， 不 要 让 
absolute 这 个 小 魔 风 到 处 若是 生 非 。 


知道 了 故事 背景 ， 对 relative 的 诸多 特性 我 们 就 很 好 理解 了 。 
6.9.1 relative 对 absolute 的 限制 


虽然 说 relative/absolute/fixed 都 能 对 absolute 的 “ 包 齐 
性 ”以 及 “定位 * 产 生 限制 ， 但 只 有 relative 可 以 让 元 素 依 然 保持 在 正常 
的 文档 流 中 。 就 好 像 虽 然 唐 僧 、 观 世 音 车 萨 、 如 来 佛祖 都 能 限制 孙 情 


空 ， 但 只 有 唐僧 是 凡 界 中 的 凡人 ， 可 以 不 动 声色 地 把 孙悟空 驯 教 得 服 服 
帖 帆 。 


下 面 举 个 简单 例子 示意 一 下 relative 对 absolute 的 限制 。 下 面 
的 CSS 代 码 之 前 出 现 过 ， 是 冲 着 履 盖 整个 浏览 器 可 视窗 体 去 的 ， 这 出 手 
其 为 霸气 。 


.box { 
position: absolute; 


left: 0; right: 0; top: 0; bottom: 0; 
} 


现在 有 如 下 的 小 图 标 样式 : 


.icon 
width: 20px; height: 20px; 
position: relative; 


并 且 HTML 结 构 关 系 如 下 : 


<div class="icon"> 
<div class="box"></div> 


</div> 


请 问 ， 此 时 ,box 尺寸 多 少 ? 


原本 霸气 的 窗 体 尺 寸 一 下 子 被 限制 到 这 里 的 小 不 汶 丢 的 
20pxx20px， 瞬 间 从 天 上 掉 到 地 上 。 最 根本 的 原因 是 ， 此 时 .box 元 素 
的 包含 块 变 成 了 ,icon。 


6.9.2 relative 与 定位 


relative 的 定位 有 两 大 特性 ， 一 是 相对 目 身 ;二 是 无 侵入 。 


故事 继续 。 话 说 absolute 被 relative 限 制 得 没 脾气 ， 于 是 便 想 
尽 想 办 法 要 套套 其 大 哥 relative 的 技能 ， 看 看 有 没有 什么 漏洞 可 钻 。 


于 是 ， absolute 跑 过 去 找 relative， 一 番 寒 晕 后 开口 道 :“ 大 
， 听 三 弟 说 你 定位 技能 和 我 们 不 一 样 ， 我 想 看 看 ...... 


中 


“可 以 啊 ， 难 得 你 主动 找 我 ! "relative 毫 不 犹 驳 地 答 道 

“ 那 好 ， 我 数 一 二 三 ， 然 后 我 们 同时 top :0;1Left :0 瞬 身 定位 。” 
“好 1 ” 

RE 


只 听 “ 咱 ”的 一 声 ，absolute 瞬 间 跑 到 了 结 界 的 左上 角 ， 很 是 得 
意 ， 此 时 absolute 发 现 其 大 哥 依 然 原 地 不 动 ， 心 想 可 能 是 大 哥 技 能 发 
动 时 间 比 较 长 吧 。 然 后 5 分 钟 过 去 了 ，absolute 实 在 忍 不 住 了 :“ 大 
可 ， 你 怎么 还 不 定位 啊 ? ” 


“你 在 扯 什么 啊 ， 我 早 就 已 经 left :0;top:0 定 位 了 啊 ! ” 


absolute 的 额 尖 上 瞬间 挂 下 来 5 条 黑 线 和 一 滴 汗 。 他 缓 了 缓 自己 
的 复兴 ， 继 续 道 : “ 那 我 们 换 成 同时 top :100px; Left:100px 定 位 
吧 ! 3? 


“可 以 呀 | 3? 


好 二 天 如 二 记 


只 听 “ 咱 ?的 一 声 ，absolute 了 瞬间 跑 到 了 结 界 的 左上 角 100px 的 地 
方 ， 回 头 一 看 大 哥 ， 只 见 其 慢 悠悠 地 往 右 侧 和 下 方 各 移动 了 100px ( 见 
图 6-65) ! absolute 立 马 坚 起 来 大 拇指 :“ 原 来 大 可 定位 是 这 样子 的 
呀 ， 是 相对 于 目 喘 进行 偏 移 定 位 的 ， 小 第 我 学 习 了 ! ” 


“其 实 不 眶 你 说 ， 这 征 为 了 限制 你 ， 我 特意 练 束 的 定位 ， 虽 然 活动 
半径 小 了 点 儿 ， 但 是 为 了 看 好 你 ， 这 点 儿 牺 牲 是 值得 的 。 也 正 因为 这 
个 ， 我 被 世人 称 为 "相对 定位 ”。” 


“这 ..…..”absolute 的 额头 上 瞬间 又 多 了 几 根 黑 线 。 


“无 侵入 ”的 意思 是 ， 当 relative 进 行 定位 偏 移 的 时 候 ， 一 般 情 况 
下 不 会 影响 周围 元 素 的 布局 。 


故事 继续 。absolute 后 来 仔细 回想 大 可 的 定位 技能 ， 总 觉得 在 哪 
里 见 过 ， 后 来 总 算 想 起 来 ， 好 像 激 进 的 margin 属 性 定位 跟 大 哥 的 很 
像 ， 这 事情 有 必要 验证 一 下 。 于 是 数 日 后 ，absolute 威 逼 利诱 
margin 前 来 和 relative 进 行 切 磋 ， 而 自己 则 躲 在 暗中 观察 。 


relative 敦 实 厚 重 ， 与人为善 ， 看 margin 前 来 自然 非常 欢迎 ， 
于 是 ， 就 有 了 下 面 切 磋 的 一 幕 ， 同 时 往 上 偏 移 509pXx。 


切磋 开始 之 前 ， 大 家 位 置 什么 的 都 是 一 样 的 ， 如 图 6-66 所 示 。 


left:1OOpx 


top:iOOpx 


图 6-65 ”相对 自身 定位 偏 移 示意 


使 用 margin 定 位 使 用 relative 定 位 


点 击 图 片 应 用 .pk-1 点 击 图 片 应 用 .pk-2 
图 6-66 margin/relative 定 位 的 初始 态 对 比 
margin 使 用 的 CSS 如 下 : 


.Pk-1 { 
margin-top: -S50Opx; 
} 


relative 则 是 : 


,pk-2 { 
position: relative; 


top: -S50Opx,; 


作用 于 岁 片 上 ， 结 打从 视觉 效果 看 ， 图 片 最 终 定 位 的 位 置 是 一 样 
的 ， 但是， 图 片 后 面 的 元 素 却 表现 出 了 明显 的 差异 : margin 定 位 的 图 


片 后 面 的 文字 跟着 上 来 了 ， 而 使 用 relative 定 位 的 图 片 后 面 的 文字 依 
然 在 原 地 纹 丝 不 动 ， 中 间 区 域 留 出 了 一 大 块 空 白 ， 如 图 6-67 所 示 。 有 眼见 
为 实 ， 手 动 输入 http://demo.cssworld.cn/6/6-1.php 或 者 扫 下 面 的 二 维 码 。 


点 击 图 片 应 用 .pk-1 还 在 原来 镀 里 
A 

机 < 

区 点 击 图 片 应 用 .pk-2 


图 6-67 margin/relative 定 位 对 比 


relative 的 定位 还 有 另外 两 点 值得 一 提 : 相对 定位 元 素 的 
left/top/right/bottom 的 百分比 值 是 相对 于 包含 块 计算 的 ， 而 不 
是 自身 。 注 意 ， 虽 然 定位 位 移 是 相对 自身 ,但 是 百分比 值 的 计算 值 不 


是 。 


top 和 bottom 这 两 个 垂直 方向 的 百分比 值 计 算 跟 height 的 百分比 
值 是 一 样 的 ， 都 是 相对 高 度 计算 的 。 同 时 ， 如 果 包 含 块 的 高 度 是 
auto， 那 么 计算 值 是 0， 偏 移 无 效 ， 也 就 是 说 ， 如 果 父 元 素 没有 设 定 高 
度 或 者 不 是 “格式 化 高 度 ”"， 那 和 relative 类 似 top :20% 的 代码 等 同 于 
top:0。 


当 相 对 定位 元 素 同 时 应 用 对 立方 向 定位 值 的 时 候 ， 也 就 是 
top/bottom 和 ]eft/right 同 时 使 用 的 时 候 ， 其 表现 和 绝对 定位 差异 
很 大 。 绝 对 定位 是 尺寸 拉 伸 ， 保 持 流体 特性 ， 但 是 相对 定位 却 是 “你 死 
我 活 ” 的 表现 ， 也 就 是 说 ， 只 有 一 个 方向 的 定位 属性 会 起 作用 。 而 识 强 
讨 弱 则 是 与 文档 流 的 顺序 有 关 的 ， 黑 认 的 文档 流 是 自 上 而 下 、 从 左 往 
右 ， 因 此 top/bottom 同 时 使 用 的 时 候 ，bottom 被 干掉 ; 
left/right 同 时 使 用 的 时 候 ，right 比 命 。 


.example { 
position: relative,; 
top: 10px; 
right: 10px; /* 无 效 */ 


bottom: 10px; /* 无 效 */ 
left: 10px; 


} 
6.9.3 relative 的 最 小 化 影响 原则 


“relative 的 最 小 化 影响 原则 ”十 我 目 己 总 结 的 一 套 更 好 地 布局 实 
践 的 原则 ， 主 要 分 为 以 下 两 部 分 : 


(1) 尽量 不 使 用 relative， 如 采 想 定位 某 些 元 素 ， 看 看 能 否 使 
用 “无 依赖 的 绝对 定位 ”; 


(2) 如 果 场 景 受 限 ， 一 定 要 使 用 relative， 则 该 Felative 务 必 
最 小 化 。 


第 一 点 前 文 有 重点 介绍 ， 应 该 很 好 理解 ， 关 键 是 第 二 
点 ,“relative 最 小 化 "是 什么 意思 ? 


我 们 可 以 看 一 个 简单 的 例子 。 例 如 ， 我 们 希望 在 某 个 模块 的 右上 角 
定位 一 个 图 标 ， 初 始 HTML 结 构 如 下 : 


<div> 
<img src="icon.png"> 
<p> 内 容 1</p> 
<p> 内 容 2</p> 


<p> 内 容 3</p> 
<p> 内 容 4</p> 


</div> 
如 果 让 大 家 去 实现 的 话 ， 我 估计 十 有 八 九 都 会 如 下 面 这 样 实现 : 


<div style="position:relative;"> 
<img src="icon.png" style= 
"position:absolute;top:0;right:0;"> 
<p> 内 容 1</p> 
<p> 内 容 2</p> 
<p> 内 容 3</p> 
<p> 内 容 4</p> 


</div> 


但 是 ， 如 果 采 用 “relative 的 最 小 化 影响 原则 " 则 应 该 是 如 下 面 这 
股 实现 


<div> 
<div style="position:relative;"> 
<img src="icon.png" style="position:absolute;top:0;right:0;"> 
</div> 
<p> 内 容 1</p> 


<p> 内 容 2</p> 
<p> 内 容 3</p> 
<p> 内 容 4</p> 


</div> 


差别 在 于 ， 此 时 relative 影 响 的 元 素 只 是 我 们 的 图 标 ， 后 面 的 “内 
容 1” 之 类 的 元 素 依然 保持 开始 时 干净 的 状态 。 


有 人 可 能 会 有 疑问 ， 为 什么 要 多 此 一 举 呢 ? 之 前 的 实现 效果 槛 好 
的 ， 大 家 都 这 么 使 用 的 ， 不 照样 脸 上 洋 盗 着 灿烂 的 笑容 ! 


真 的 是 这 样 吗 ? 我 想 大 家 或 多 或 少 都 经 历 过 一 些 关 于 层级 的 问题 ， 
在 大 部 分 场景 下 ， 上 面 的 两 种 实现 并 没有 什么 差异 ， 但 是 页 面 一 旦 复 
水 ， 第 一 种 实现 方法 整 会 留 下 隐患 。 因 为 一 个 普通 元 素 变 成 相对 定位 元 
素 ， 看 上 去 长 相 什么 的 没有 变化 ， 但 是 实际 上 元 素 的 层 车 顺序 提高 
甚至 在 了 下 6 和 了 7 浏览 器 下 无 须 设置 z- Index 就 直接 创建 了 新 的 层 琶 上 下 
文 ， 会 导致 一 些 绝对 定位 浮 层 无 论 怎 么 设置 z- Index 都 会 被 其 他 元 素 黎 
盖 。 当 然 ， z-index 无 效 已 经 算是 比较 严重 的 问题 了 。 


这 里 我 们 不 妨 看 一 个 看 似 无 伤 大 雅 的 小 问题 。 场 景 是 这 样 的 : A 模 
块 下 方 有 一 个 “B 模 块 "， 这 个 “B 模 块 ”设置 margin-top:-100px， 
希望 可 以 履 盖 “A 模块 ”后 面 的 部 分 内 容 ， 此 时 两 种 实现 的 差异 就 显现 出 
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如 果 是 前 面 position:relative 设 置 在 容器 上 的 实现 ， 会 发 
现 “B 模 块 * 并 没有 和 履 盖 “A 模块 "， 反 而 是 被 “A 模块 * 履 盖 了 ! 原因 很 简 
单 ， 相 比 普通 元 素 ， 相 对 定位 元 素 的 层 琶 顺序 是 “ 野 畜 ?级别 的 ， 自 然 <A 


模块 ”要 禾 盖 “B 模 块 "”。 如 采 要 想 实 现 目 标 效 有 果 ， 就 需要 给 “B 模 块 ” 也 设 
置 position:relative。 唉 ， 冤 冤 相 报 何 时 了 ? 


但 是 ， 如 果 是 后 面 “relative 的 最 小 化 影响 原则 ”的 实现 ， 由 于 
relative 只 影响 右上 和 角 的 图 标 ,“A 模 块 ”后 面 的 内 容 都 还 是 普通 元 
素 ， 那 么 ， 最 终 的 效果 就 是 我 们 希望 的 "B 模 块 ” 履 盖 “A 模 块 ”， 不 动 一 兵 
一 蔡 融 达到 了 预期 目的 ， 台 不 亦 截 ! 


“relative 的 最 小 化 影响 原则 ?不 仅 规避 了 复杂 场景 可 能 出 现 样式 
问题 的 隐患 ， 从 日 后 的 维护 角度 讲 也 更 方便 ， 比 方 说 过 了 一 个 月 ， 我 们 
不 需要 右上 角 的 图 标 了 ， 直 接 移 除 这 个 relative 最 小 化 的 单元 即 可 ! 
但 是 ， 如 果 relative 是 这 个 容器 上 的 ， 这 段 样式 代码 你 敢 删 吗 ? 万 一 
其 他 元 素 定 位 也 需要 呢 ? 万 一 relative 还 有 提高 层 苔 顺序 的 作用 呢 ? 
留 着 没 问 题 ， 删 掉 可 能 出 bug， 我 想 大 多 数 的 开发 者 一 定 会 留 着 的 ， 这 
也 是 为 什么 随 着 项 目 进程 的 推进 代码 会 越 来 越 见 余 的 原因 。 


从 这 一 点 可 以 看 出 来 ， 项 目 代 码 越 来 越 胱 肿 、 越 来 越 见 余 ， 归 根 结 
底 还 是 一 开始 实现 项 目的 人 的 技术 水 平和 能 力 火候 还 不 够 。 实 现时 “ 洋 
次 着 灿烂 的 笑容 ”没什么 好 得 意 的 ， 能 够 让 日 后 维护 甚至 其 他 人 接手 项 
目 维护 的 时 候 也 “ 洋 淤 着 灿烂 的 笑容 ?>， 那 才 是 真 历 害 ! 


6.10 ”强悍 的 position:fixed 固 定 定位 


定位 属性 值 三 兄弟 的 老 三 position:fixed 固 定 定位 是 三 人 中 最 
强悍 的 ， 一 副 天 不 怕 地 不 怕 的 感觉 ， 主 要 表现 为 把 absolute 管 得 服 服 
帖 帖 的 relative 对 fixed 是 一 点 儿 办 法 都 没有 ， 普 通 元 素 想 要 


overflow:hidden 前 裁 position:fixed 也 是 痴人说梦 。 固 定 定位 
之 所 以 这 么 强悍 ， 根 本 原本 是 其 “包含 块 " 和 其 他 元 素 不 一 样 。 


6.10.1 position:fixed 不 一 样 的 “包含 块 ” 


position:fixed 固 定 定位 元 素 的 “包含 块 " 是 根 元 素 ， 我 们 可 以 
将 其 近似 看 成 <htm1> 元 素 。 换 句 话 说， 唯一 可 以 限制 固定 定位 元 素 的 
就 是 <htm1> 根 元 素 ， 而 根 元 素 就 这 么 一 个 ， 也 就 是 全 世界 只 有 一 个 人 
能 限制 position:fixed 元 素 ， 可 见 人 家 强悍 还 是 有 强悍 的 资本 的 。 


所 以 ， 如 采 想 把 某 个 元 素 固 定 定位 在 某 个 模块 的 右上 角 ， 下 面 这 种 
做 法 是 没有 用 的 : 


<div class="father"> 
<div class="son"></div> 
</div> 
father { 
width: 300px; height: 200px; 
position: relative; 


.Son 
width: 40px; height: 40px; 
position: fixed; 
top: 0; right: 0; 


. Son 元 素 只 会 跑 到 窗 体 的 右上 角 ， 是 不 会 在 ,father 的 右上 角 
的 ，relative 对 fixed 定 位 没有 任何 限制 作用 。 


但 是 ， 并 不 是 说 我 们 无 法 把 , son 元 素 精 确定 位 到 ,father 的 右上 
角 ， 事 实 上 是 可 以 实现 的 ， 如 何 实现 呢 ? 


和 “无 依赖 的 绝对 定位 ”类 似 ， 就 是 “无 依赖 的 固定 定位 *”， 利 用 
absolute/fixed 元 素 没有 设置 left/top/right/bottom 的 相对 定 
位 特性 ， 可 以 将 目标 元 素 定位 到 我 们 想 要 的 位 置 ， 处 理 如 下 : 


<div class="father"> 
<div class="right"> 
&nbsp;<div class="son"></div> 
</div> 
</div> 
father { 
width: 300px; height: 200px; 
position: relative; 


} 
.right 1 


height: 0; 
text-align: right; 
overflow: hidden,; 


.SONn { 
display: inline; 
width: 40px; height: 40px; 
position: fixed; 
margin-left: -40px; 

} 


6.10.2 position:fixed 的 absolute 模 拟 


有 时 候 我 们 希望 元 素 既 有 不 跟随 滚动 的 固定 定位 效果 ， 又 能 被 定位 
元 素 限 制 和 精准 定位 ， 那 该 怎么 办 呢 ? 


我 们 可 以 使 用 position:absolute 进 行 模 拟 ， 原 理 其 实 很 简单 : 
页 面 的 滚动 使 用 普通 元 素 蔡 代 ， 此 时 深 动 元 素 之 外 的 其 他 元 素 自然 就 有 
了 “固定 定位 ”的 效果 了 。 

常规 的 HTML 结构 和 CSS 代 码 是 下 面 这 样 的 : 


<html> 
<body> 
<div class="fixed"><div> 


</body> 
</html> 
.fixed { 
position: fixed; 


} 


使 用 position:absolute 进 行 模拟 则 需要 一 个 深 动 容器 ， 假 设 类 
名 是 .page， 则 有 : 


<html> 
<body> 
<div class="page"> 固 定 定 位 元 素 <div> 
<div class="fixed"><div> 
</body> 
</html> 
html, body { 
height: 100%; 
overflow: hidden， 


} 

‘page { 
height: 100%; 
overflow: auto， 


} 
.fixed { 

position: absolute,; 
} 


整个 网 页 的 滚动 条 由 .page 元素 产生 ， 而 非 根 元 素 ， 此 时 , fixed 
元 素 虽 然 是 绝对 定位 ， 但 是 并 不 在 滚动 元 素 内 部 ， 自 然 滚动 时 不 会 跟 
随 ， 如 同 固定 定位 效果 ， 同 时 本 身 绝 对 定位 。 因 此 ， 可 以 使 用 
relative 进 行 限制 或 者 overf1Low 进 行 裁剪 等 。 


然而 ， 将 网 页 的 窒 体 滚动 变 成 内 部 滚动 ， 很 多 窗 体 滚动 相关 的 小 
JavaScript 组 件 需 要 跟着 进行 调整 ， 并 且 可 能 会 丢失 其 他 一 些 浏 咒 器 内 置 
行为 ， 需 要 谨慎 使 用 。 


6.10.3 ” position:fixed 与 背景 锁定 


蒙 层 弹 窗 是 网 页 中 常见 的 交互 ， 其 中 黑色 半 透 明 全 屏 和 覆盖 的 蒙 层 基 
本 上 都 是 使 用 position: fixed 定 位 实现 的 。 但 是 ， 如 果 细 致 一 点 儿 
允 会 发 现 蒙 层 无 法 和 履 盖 浏 览 器 右 侧 的 滚动 栏 ， 并 且 映 标 滚 动 的 时 候 后 面 
的 背景 内 容 依然 可 以 被 滚动 ， 并 没有 被 锁定 ， 体 验 略 打折 扣 。 


如 采 布 望 背 景 锁定 ， 该 如 何 实现 呢 ? 


要 想 解 决 一 个 问题 ， 可 以 从 发 生 这 个 问题 的 原因 入 手 。 
position:fixed 蒙 层 之 所 以 出 现 背 景 依然 滚动 ， 那 是 因为 深 动 元 素 
是 根 元 素 ， 正 好 是 position:fixed 的 “包含 块 ”。 所 以 ， 如 果 希 望 背 
景 被 锁定 ， 可 以 借鉴 <absolute 模 拟 fixed 定 位 ”的 思路 ， 让 页 面 深 动 

条 由 内 部 的 普通 元 素 产 生 即 可 。 


如 采 网 站 的 滚动 结构 不 方便 调整 ， 则 需要 借助 JavaScript 来 实现 锁 
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如 果 是 移动 端 项 目 ， 阻 止 touchmove 事 件 的 默认 行为 可 以 防止 滚 
动 ; 如 有 果 是 桌面 端 项 目 ， 可 以 让 根 元 素 直 接 overflow:hidden。 但 
是 ，Windows 操 作 系 统 下 的 浏览 器 的 深 动 条 都 是 占据 一 定 宽 度 的 ， 深 动 

条 的 消失 必然 会 导致 页 面 的 可 用 宽度 变化 ， 页 面 会 产生 体 难 更 精 糕 的 昂 
动 问题 ， 那 怎么 办 呢 ? 很 简单 ， 我 们 只 需要 找 个 东西 填补 消失 的 滚动 条 
束 好 了 。 那 该 找 什么 东西 填充 呢 ? 这 时 候 就 轮 到 功勋 卓越 的 border 属 
性 出 马 了 一 一 消失 的 滚动 条 使 用 同等 宽度 的 透明 边框 填充 ! 


于 是 ， 在 蒙 层 显示 的 同时 执行 下 面 的 JavaScript 代 码 ; 


var widthBar = 17, root = document ,documentE1Lement ， 
if (typeof window.innerwidth == 'number') { 
widthBar = window.innerwidth - root.clientwidth,; 


root.style.overflow = 'hidden ' ， 
widthBar + 'px solid transparent ' ， 


root.style.borderRight = 


隐藏 的 时 候 执行 下 面 的 JavaScript 代 码 : 


var root = document ,documentEJLement 
root.style.overflow = '';， 


root.style.borderRight 


束 可 以 实现 我 们 期 望 的 锁定 效果 了 。 


第 7 章 CSS 世界 的 层 符 规 则 


所 谓 “ 层 合 规 则 *， 指 的 是 当 网 页 中 的 元 于 发 生 层 合 时 的 表现 规 
则 。 


在 现实 世界 ， 凡 事 都 有 个 先后 顺序 ， 凡 物 都 有 个 论 资 排 辜 。 例 
如 ， 食 稼 排队 打 饭 ， 讲 求 完 到 先 得 ， 总 不 可 能 一 拥 而 上 ; 先入 学 的 是 
学 长 学 姐 ， 先 拜师 的 是 师兄 师姐 。 


在 CSS 界 也 是 如 此 。 只 是 ， 一般 情况 下 众生 平等 ， 看 不 出 什么 差 
异 。 但 是 ， 当 产生 冲突 或 纠 韶 的 时 候 ， 显 然 是 不 可 能 做 到 完全 平等 
的 。 对 CSS 世 界 中 的 元 素 而 言 ， 所 谓 的 “冲突 ” 指 什么 呢 ， 其 中 很 重要 的 


一 个 层面 束 古 “ 层 谷 显示 冲突 ”。 


稚 认 情况 下 ， 网 页 内 容 是 没有 俩 移 角 的 垂直 视觉 择 现 ， 当 内 容 发 
生 层 区 的 时 候 ， 一 定 会 有 一 个 前 后 的 层 蕉 顺序 产生 ， 有 点 儿 类 似 于 真 
实 世 界 中 “ 论 资 排 辜 ”的 感觉 。 


7.1 z-index 只 是 CSS 层 准 规 则 中 的 一 叶 小 舟 


说 到 层 谷 ,很 多 人 第 一 反应 就 是 z-index 属性 ， 人 如 其 名 ，“z 轴 
顺序 ?明摆着 就 是 和 层 县 规则 有 关 。 


在 CSS 世 界 中 ，z-index 属 性 只 有 和 定位 元 素 (position 不 为 
static 的 元 素 ) 在 一 起 的 时 候 才 有 作用 ， 可 以 是 正 数 也 可 以 是 负数 。 


理论 上 说 ， 数 值 越 大 层级 越 高 ， 但 实际 上 其 规则 要 复杂 很 多 ， 这 个 后 
面 会 深入 介绍 。 


但 随 着 CSS3 新 世界 的 到 来 ，z- index 已 经 并 非 只 对 定位 元 素 有 
效 ，f1lex 盒 子 的 子 元素 也 可 以 设置 z- Index 属性 ， 不 过 本 书 并 不 予以 


讨论 。 


要 知道 ， 网 页 中 绝 大 部 分 元 素 是 非 定 位 元 素 ， 并 且 影 响 层 县 顺序 
的 属性 远 不 上 z-index 一 个 ， 因 此 大 家 千 万 不 要 以 为 z-index 属性 就 
可 以 代表 CSS 世 界 的 层 到 规则 ， 实 际 上 z- index 只 是 CSS 层 县 规则 中 的 
一 叶 小 舟 ，CSS 层 县 规则 的 体 量 要 比 大 家 想象 的 要 大 得 多 。 


7.2 ”理解 CSS 世 界 的 层 玲 上 下 文 和 层 登 水 平 


7.2.1 什么 是 层 琶 上 下 文 

层 琶 上 和 下文， 英文 称 作 stacking context， 是 HTML 中 的 一 个 三 维 的 
概念 。 如 果 一 个 元 素 含有 层 芥 上下文， 我 们 可 以 理解 为 这 个 元 素 在 z 轴 
上 就 “高 人 一 等 ”。 


这 里 出 现 了 一 个 名 词 一 一 2 轴 ， 它 指 的 是 什么 呢 ? 其 表示 的 是 用 户 
与 显示 侣 之 间 这 条 看 不 见 的 垂直 线 ， 即 图 7-1 中 的 这 条 水 平 线 。 
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图 7-1 z 轴 示意 


层 琶 上 下 文 是 一 个 概念 ， 跟 “ 块 状 格式 化 上 下 文 ”(BFC) 类 似 。 然 
而 ， 概 念 这 个 东西 是 比较 虚 、 比 较 抽 象 的 ， 要 想 轻松 理解 ， 我 们 需要 
将 其 具象 化 。 


i 


怎么 个 具象 化 法 呢 ? 我 们 可 以 把 层 县 上 下 文理 解 为 一 种 “ 层 县 结 
别 "， 目 成 一 个 小 世界 。 这 个 小 世界 中 可 能 有 其 他 的 “ 层 县 结 界 ”， 而 目 
喘 也 可 能 处 于 其 他 “ 层 三 结 用 ?中 。 


7.2.2 ”什么 是 层 登 水 平 


再 来 说 说 “ 层 琶 水 平 ”。 层 县 水 平 ， 瑞 文 称 作 stacking level， 决 定 了 
同一 个 层 琶 上 下 文中 元 素 在 z 轴 上 的 显示 顺序 。level 这 个 词 很 容易 让 我 
们 联想 到 现实 世界 中 的 论 资 排 莫 。 现 实 世界 中 ， 每 个 人 都 是 独立 的 个 
体 ， 包 括 同 卵 双胞胎 ， 有 差异 就 有 区 分 。 例 如 ， 双 胞 胎 虽 然 长 得 像 一 
个 模子 里 出 来 的 ， 但 实际 上 出 生 时 间 还 是 有 先后 的 ， 先 出 生 的 那个 就 
大 ， 有 是 大 哥 或 大 姐 。 网 页 中 的 元 素 也 是 如 此 ， 页 面 中 的 每 个 元 素 都 是 
独立 的 个 体 ， 它 们 一 定 是 会 有 一 个 类 似 的 排名 顺序 的 存在 。 而 这 个 排 
名 顺序 、 论 资 排 右 就 是 这 里 所 说 的 “ 层 车 水 平 ”。 


显而易见 ， 所 有 的 元 素 都 有 层 琶 水 平 ， 包 括 层 三 上 下 文 元 了 么 ,也 
包括 普通 元 素 。 然 而 ， 对 普通 元 素 的 层 肥 水 平 探讨 只 局 限 在 当前 层 肥 
上 下 文 元 素 中。 为 什么 呢 ? 因为 不 如 此 就 没有 意义 。 层 到 上 下 文本 身 
就 是 一 个 强力 的 “ 层 谷 结 界 ”"”， 而 普通 元 素 的 层 谷 水 平 是 无 法 突破 这 个 
结 弄 和 结 弄 外 的 元 素 去 较量 层 县 水 平 的 。 


需要 注意 的 是 ， 诸 位 千 万 不 要 把 层 车 水 平和 CSS 的 z-index 属性 
混为一谈 。 尽 管 某 些 情况 下 z-index 确实 可 以 影响 层 琶 水平， 但 是 只 
限于 定位 元 系 以 及 f1ex 人 金子 的 孩子 元 素 ; 而 层 登 水平 所 有 的 元 素 都 存 


7.3 ”理解 元 素 的 层 登 顺序 


再 来 说 说 层 琶 顺序 。 层 县 顺序 ， 英 文 称 作 stacking order， 表 示 元 素 
发 生 层 琶 时 有 着 特定 的 垂直 显示 顺序 。 注 意 ， 这 里 跟 上 面 两 个 不 一 
样 ， 上 面 的 “ 层 著 上 下 文 * 和 “ 层 车 水 平 * 是 概念 ， 而 这 里 的 “ 层 闭 顺序 ”是 
规则 。 


在 CSS 2.1 的 年 代 ， 在 CSS3 新 世界 还 没有 到 来 的 时 候 (注意 这 里 的 
前 提 ) ， 层 琶 顺 序 规则 如 图 7-2 所 示 。 


层 蓉 上 下 文 
background/border 


block 块 状 水 平 盒子 


图 7-2 ”CSS 世界 层 羞 顺序 规则 


天 于 图 7-2 这 里 有 一 些 补充 说 明 。 


(1) 位 于 最 下 面 的 background/border 特 指 层 到 上 下 文 元 素 的 
边框 和 背景 色 。 每 一 个 层 琶 顺序 规则 仅 适 用 于 当前 层 到 上 下 文 元 素 的 
小 世界 。 


(2) in1ine 水 平 盒子 指 的 是 包括 in1line/in1line- 
block/inline-table 元 素 的 “ 层 闭 顺序 ”"， 它 们 都 是 同等 级 别 的 。 


(3) 单纯 从 层 释 水 平 上 看 ， 实 际 上 z-index:0 和 z- 
index:auto 是 可 以 看 成 是 一 样 的 。 注 意 这 里 的 措辞 一 一 “单纯 从 层 苇 
水 平 上 看 ”， 实 际 上 ， 两 者 在 层 玲 上 下 文 领域 有 着 根本 性 的 差异 。 


下 面 我 要 问 一 个 有 意思 的 问题 : 大 家 有 没有 想 过 ， 为 什么 内 联 元 
素 的 层 且 顺序 要 比 浮 动 元 隶 和 块 状元 素 都 高 ? 


为 什么 呢 ? 我 明明 感觉 浮动 元 素 和 块 状元 素 要 更 强 一 点 啊 。 我 号 
不 卖 天 子 了 ， 直 接 看 图 7-3 中 的 标注 说 明 。 


层 羽 上 下 文 
background/border 


玫 一 一 装饰 


block 块 状 水 平 盒子 


图 7-3 ” CSS 世界 层 徐 顺 序 类 型 标注 


background/border 为 装饰 属性 ， 浮 动 和 块 状元 素 一 般 用 作 布 
局 ， 而 内 联 元 素 都 是 内 容 。 网 页 中 最 重要 的 是 什么 ? 当然 是 内 容 了 ! 
尤其 是 CSS 世 界 是 为 更 好 的 图 文 展 示 而 设计 的 ， 因 此 ， 一 定 要 让 内 容 的 
层 县 顺序 相当 高 ， 这 样 当 发 生 层 到 时 ， 重 要 的 文字 、 图 片 内 容 才 可 以 
优先 显示 在 屏幕 上 上。 例如， 文字 和 浮动 图 片 重 到 的 时 候 ， 如 网 7-4 所 
下 本 


哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 
这 本 书 的 人 都 是 帅哥 ~ 


图 7-4 ”浮动 元 素 和 文字 重合 时 文字 在 上 面 


7.4 务必 牢记 的 层 登 准则 


下 面 这 两 条 是 层 县 领域 的 黄金 准则 。 当 元 素 发 生 层 县 的 时 候 ， 其 
复 关 天 系 齐 循 下 面 两 条 准则 ; 


(1) 谁 大 谁 上 : 当 具 有 明显 的 层 县 水 平 标识 的 时 候 ， 如 生效 的 z- 
index 属 性 值 ， 在 同一 个 层 琶 上 下 文 领域 ， 层 县 水 平 值 大 的 那 一 个 黎 
次 小 的 那 一 个 。 


(2) 后 来 居 上 : 当 元 素 的 层 车 水 平一 致 、 层 全 顺序 相同 的 时 候 ， 
在 DOM 流 中 处 于 后 面 的 元 素 会 徐 盖 前 面 的 元 素 。 


在 CSS 和 HTML 领域 ， 只 要 元 素 发 生 了 重 登 ， 都 离 不 开 上 面 这 两 条 
黄金 准则 。 因 为 后 面 会 有 多 个 实例 说 明 ， 这 里 束 到 此 为 止 。 


7.5 深入 了 解 层 登 上 下 文 


7.5.1 层 琶 上 下 文 的 特性 
层 登 上 下 文 元 素 有 如 下 特性 。 


。 层 谷 上 下 文 的 层 车 水 平 要 比 普 通 元 素 高 (原因 后 面 会 说 明 ) 。 

。 层 车 上 下 文 可 以 阻 断 元 素 的 混合 模式 (参见 
http://www.zhangxinxu.com/wordpress/?p=5155 的 这 篇 文章 的 第 二 部 
分 说 明 ) 。 

。 层 从 上 下 文 可 以 藤 套 ， 内 部 层 谷 上 下 文 及 其 所 有 子 元 素 均 受制 于 
外 部 的 “ 层 年 上 下 文 ”。 


每 个 层 琶 上 下 文 和 兄弟 元 素 独立 ， 也 就 是 说 ， 当 进行 层 到 变化 或 
演 染 的 时 候 ， 只 需要 考虑 后 代 元 素 。 

每 个 层 全 上 下 文 是 目 成 体系 的 ， 当 元 素 发 生 层 肢 的 时 候 ， 整 个 元 
素 补 认为 是 在 父 层 共 上 下 文 的 层 谷 顺序 中 。 


7.5.2” 层 秋 上下文 的 创建 


和 块 状 格式 化 上 下 文 一 样 ， 层 全 上 下 文 也 基本 上 是 由 一 些 特定 的 
CSS 属 性 创建 的 。 我 将 其 总 结 为 3 个 流派 。 


(1) 天 生 派 : 页 面 根 元 素 天 生 具 有 层 有 到 上下文， 称 为 根 层 琶 上 下 
pa 


(2) 正统 派 ，z-index 值 为 数值 的 定位 元 素 的 传统 “ 层 释 上 下 
pa 

(3) 扩招 派 ， 其 他 CSS3 属 性 。 
1. 根 层 琶 上 下 文 


根 层 琶 上 下 文 指 的 是 页 面 根 元 素 ， 可 以 看 成 征 <htm1> 元 素 。 
此 ， 页 面 中 所 有 的 元 素 一 定 处 于 至 少 一 个 “ 层 琶 结 界 ”中 。 


2. 定位 元 素 与 传统 层 琶 上 下 文 


对 于 position 值 为 relative/absolute 以 及 Firefox/ 正 浏览 器 
(不 包括 Chrome 浏 览 器 ) 下 含有 position:fixed 声 明 的 定位 元 素 ， 
当 其 z- index 值 不 是 auto 的 时 候 ， 会 创建 层 琶 上 下 文 。 


知道 了 这 一 点 ， 有 些 现象 就 好 理解 了 。 


HTML 代 码 如 下 : 


<div style="position:relative; z-index:auto;"> 

<1-- 美女 --> 

<img src="1.jpg" style="position:absolute; z-index:2;"> 
</div> 


<div style="position:relative; z-index:auto;"> 

<1-- 美景 --> 

<img src="2.jpg" style="position:relative; z-index:1;"> 
</div> 


结 采 如 图 7-5 所 示 。 效 采 符 合 预 期 ， 毕 竞 “ 美 女 ” 图 片 的 z-index 值 
是 2， 而 “美景 ”图片 的 z- Index 十 1。 


下 面 我 们 对 父 级 简单 调整 一 下 ， 把 z-index:auto 改 成 层 闭 水 平 
一 样 高 的 z-index:0。 代 码 如 下 : 


<div style="position:relative; z-index:0;"> 

<1-- 美女 --> 

<img src="1.jpg" style="position:absolute; z-index:2;"> 
</div> 


<div style="position:relative; z-index:0;"> 

<1-- 美景 --> 

<img src="2.jpg" style="position:relative; z-index:1;"> 
</div> 


结果 会 发 现 窗 盖 关 系 大 然 反 过 来 了 ， 此 时 “美景 "图 片 履 盖 在 了 “美女 ”图 
请 之 上 ， 如 图 7-6 所 示 。 


图 7-5 “美女 ”覆盖 在 “美景 "之 上 


图 7-6 “美景 "覆盖 在 “美女 "之 上 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/7/5-1.php 或 者 扫 右 侧 的 
二 维 码 。 


为 什么 小 小 的 改变 会 产生 相反 的 结果 呢 ? 差别 就 在 于 ，z-index: 
auto 所 在 的 <div> 元 素 是 一 个 普通 定位 元 素 ， 于 是 ， 里 面 的 两 个 
<img> 元 素 的 层 营 比较 就 不 受 父 级 的 影响 ， 两 者 直接 套用 “ 层 营 黄 金 准 
则 ”。 这 里 ， 两 个 <ijmg> 元 妹 有 着 明显 不 一 的 z-index 值 ， 因 此 遵 
循 “ 谁 大 谁 上 ”的 准则 ， 于 是 ，z-index 为 2 的 那个 “美女 ”就 显示 在 z- 
index 为 1 的 “美景 "上 面 了 。 


而 z-index 一 旦 变 成 数值 ， 哪 人 是 0， 就 会 创建 一 个 层 玲 上 下 文 。 
此 时 ， 层 车 规则 惑 发 生 了 变化 。 层 全 上 下 文 的 特性 里 面 最 后 一 条 是 自 
成 体系 。 两 个 <ijmg> 元 素 的 层 著 顺序 比较 变 成 了 优先 比较 其 父 级 层 伟 
上 下 文 元 素 的 层 舍 顺序 。 这 里 ， 由 于 外 面 的 两 个 <div> 元 素 都 是 z- 
index :09， 两 者 层 车 顺序 一 样 大 ， 此 时 遵循 “ 层 巷 黄金 准则 ”的 男 外 一 
个 准则 “后 来 居 上 ”， 根 据 在 DOM 文 档 流 中 的 位 置 决 定 谁 在 上 面 ， 于 
是 ， 位 于 后 面 的 “美景 "就 自然 而 然 显 示 在 “美女 ?上 面 了 。 对 ， 没 错 ， 
<img> 元 素 上 的 z-index 没 起 作用 ! 


有 时 候 ， 我 们 在 网 页 重 构 的 时 候 会 发 现 z- Index 巷 套 错乱 ， 这 时 
要 看 看 是 不 是 受 父 级 的 层 苔 上 下 文 元素 干 扰 了 ， 可 能 就 瞪 然 开 衣 了 。 
但 我 还 是 提 一 下 ，IE6 和 IE7 浏 览 器 有 个 bug， 就 是 z-index :auto 的 定 
位 元 素 也 会 创建 层 琶 上 下 文 。 这 就 是 过 去 了 下 6 和 耻 7 的 z-Index 会 折腾 
死人 的 原因 。 


我 再 提 一 下 position:fixed。 在 过 去 ，position:fixed 和 
relative/ absolute 在 层 到 上 下 文 这 一 块 是 一 样 的 ， 都 是 需要 z- 
index 为 数值 才 行 。 但 是 ， 不 知道 什么 时 候 起 ，Chrome 等 WebKit 内 核 
浏览 器 下 ，position:fixed 元 素 天 然 层 到 上 下 文 元 素 ， 无 须 z- 
index 为 数值 。 根 据 我 的 测试 ， 目 前 正和 Firefox 仍 是 老 套 路 。 


3. CSS3 与 渐 时 代 的 层 琶 上 下 文 


CSS3 痢 世界 的 出 现 除 了 带 来 了 新 属性 ， 还 对 过 去 的 很 多 规则 发 出 
了 挑战 ， 其 中 对 层 合 上 下 文 规则 的 影响 显得 特别 突出 。 


(1) 元 素 为 flex 布 局 元 素 ( 父 元 素 display:flex|inline- 
flex) ， 同 时 z-index 值 不 是 auto。 


(2) 元 素 的 opacity 值 不 是 1。 
(3) 元 素 的 transform 值 不 是 none。 
(4) 元 素 mix-blend-mode 值 不 是 normal。 


(5) 元 素 的 fiLter 值 不 是 none。 


Vt 


(6) 元 素 的 jsolation 值 是 ijsolate。 


ss 


(7) 元 素 的 will1-change 属 性 值 为 上 面 2~6 的 任意 一 个 (如 


will-change:opacity 、will-chang:transform 等 ) 。 


(8) 元 素 的 -webkit-overflow-scrolling 设 为 touch。 


本 书 主要 介绍 CSS 世 界 的 知识 ， 因 此 关于 CSS3 新 世界 的 内 容 就 说 
7.5.3“” 层 到 上 下 文 与 层 登 顺序 


本 章 多 次 提 到 ， 一 旦 普通 元 素 具 有 了 层 琶 上 下 文 ， 其 层 且 顺序 就 
会 变 高 。 那 它 的 层 受 顺序 究竟 在 哪个 位 置 、 哪 个 级 别 呢 ? 


这 里 需要 分 两 种 情况 讨论 : 


(1) 如 果 层 受 上 下 文 元 素 不 依赖 z-index 数值 ， 则 其 层 琶 顺序 是 
z-index:auto， 可 看 成 z:index :0 级 别 ; 


(2) 如 果 层 和 到 上 下 文 元 素 依赖 z-index 数值 ， 则 其 层 琶 顺序 由 
z-index 值 决 定 。 


我 们 上 面 提供 的 层 县 顺序 图 实际 上 还 缺少 其 他 重要 信息 。 我 又 伦 
工夫 重新 绘制 了 一 个 更 完整 的 7 阶层 谷 顺 序 图 ， 如 图 7-7 所 示 。 


层 登 上下文 
background/border 


float 溯 动 盒子 


inline 水 平 盒子 


z-index:auto 或 看 成 z-index:0 
不 依 坦 z-index 的 层 葵 上 下 文 


正 z-index 


图 7-7 ”新 的 层 琶 顺序 规则 


这 下 大 家 应 该 知道 为 什么 定位 元 素 会 层 县 在 普通 元 素 的 上 面 了 
吧 ? 其 根本 原因 就 是 ， 元 素 一 旦 成 为 定位 元 素 ， 其 z-index 就 会 自动 
生效 ， 此 时 其 z-index 就 是 默认 的 auto， 也 就 是 90 级别， 根据 上 面 的 
层 丢 顺序 表 ， 就 会 覆盖 in1ine 或 block 或 fLoat 元 素 。 而 不 支持 zZ- 
index 的 层 秋 上 下 文 元 素 天 然 是 z-index:auto 级 别 ， 也 就 意味 着 ， 
层 合 上 下 文 元 素 和 定位 元 素 是 一 个 层 革 顺序 的 ， 于 是 当 它 们 发 生 层 苇 
的 时 候 ， 遵 循 的 是 “后 来 居 上 ”准则 。 


我 们 可 以 看 一 个 例子 : 


<img src="1.jpg" style="position:relative"> 


<img src="2.jpg" style="transform:scale(1);"> 


这 符合 “后 来 居 上 ”准则 , “美景 " 黎 盖 在 “美女 ”之 上 ， 如 图 7-8 所 示 。 


<img src="2.jpg" style="transform:scale(1);"> 


<img src="1.jpg" style="position:relative"> 


这 同样 符合 “后 来 居 上 ”准则 ，“ 美 女 ” 禾 盖 在 “美景 "之 上 ， 如 图 7-9 所 


这 


你 会 发 现 ， 两 者 样式 一 模 一 样 ， 只 是 在 DOM 流 中 的 位 置 不 一 样 ， 
这 导致 它们 的 层 合 表现 不 一 样 ， 后 面 的 图 片 在 前 面 的 图 片 的 上 面 显 
示 。 这 殊 说 明 层 合 上 下 文 元 素 的 层 谷 顺序 束 古 z-index:auto 级 别 。 


最 后 分 享 一 个 与 层 琶 上 下 文 相 关 的 有 趣 现象 。 


图 7-8 “美景 "覆盖 在 “美女 "之 上 


图 7-9 “美女 ” 履 盖 在 “美景 "之 上 


在 实际 项 目 中 ， 我 们 可 能 会 渐进 使 用 CSS3 的 fadeIn 淡 入 
animation 效 果 增 强 体验 ， 于 是 我 们 可 能 束 会 遇 到 类 似 下 面 的 现象 ， 
手动 输入 http://demo.cssworld.cn/7/5-2.php 或 者 扫 右 侧 的 二 维 码 。 有 一 个 
绝对 定位 的 黑色 半 透 明 层 履 盖 在 图 片上 上， 默认 显 示 如 图 7-10 所 示 。 但 
是 ， 一旦 图 片 开 始 走 fadeIn 淡 出 的 CSS3 动 画 ， 文 字 就 跑 到 图 片 后 面 去 
了 ， 因 为 文字 一 直 是 100% 透 明 的 纯 日 色 ， 文 字 变 淡 是 因为 跑 到 图 片 后 
面 ， 而 图 乒 半 透明 ， 文 字 穿 透 显示 而 已 ， 如 图 7-11 所 示 。 


只 有 图 片 淡出 ， 文 案 一 直 100% 透 明 


图 7-10 ”默认 的 黑色 半 透 明 歼 盖 


图 7-11 图片 淡 出 ， 文 学 跑 到 图 片 后 面 


为 什么 会 这 样 ? 实际 上 ， 学 了 本 节 的 内 容 后 就 很 容易 理解 了 。 
fadeIn 动 画 本 质 是 opacity 透 明度 的 变化 : 
@keyframes fadeIn { 


0% { 
opacity: 0; 


} 
100% { 
opacity: 1; 


要 知道 ，opacity 的 值 不 是 1 的 了 时候， 是 具有 层 县 上下文 的 ， 层 羞 
顺序 是 z-index :auto 级 别 ， 跟 没有 z-index 值 的 absolute 绝 对 定 


位 元 又 是 平起平坐 的 。 而 本 实例 中 的 文字 元 聂 在 图 片 元 系 的 表面 ， 于 
征 ， 只 要 CSS3 动 画 不 是 最 终 一 瞬间 的 opacity:1， 位 于 DOM 流 后 面 
的 图 片 束 会 苯 人 循 “后 来 居 上 ”准则 而 获 志文 子 。 


知道 原因 ， 想 要 解决 这 个 问题 束 很 简单 了 : 
(1) 调整 DOM 流 的 先后 顺序 ; 


(2) 提高 文字 的 层 县 顺序 ， 例 如 ， 设 置 Zz-Iindex:1。 
7.6 z-index 负 值 深入 理解 


自 完 明确 一 扣 ，z-index 是 文 持 人 负 值 的 ， 例 如 z-index: -1 或 者 
z-index:-99999 都 是 可 以 的 。 按 照 我 多 年 面试 新 人 的 结果 来 看 ， 非 
常 多 的 人 都 不 知道 z-index 属性 支持 负 值 ， 这 让 人 很 意外 一 一 这 可 以 
说 是 CSS 世 界 的 常识 啊 ! 我 想 了 一 下 ， 或 许 因为 这 些 人 的 知识 都 是 源 自 
项 目 ， 如 果 项 目 用 不 到 自然 就 不 知道 。 


确实 ， 你 不 知道 z-index 支持 负 值 并 不 影响 现在 的 开发 ， 需 求 可 
以 通过 其 他 方式 实现 ， 但 是 存在 既 有 道理 ， 你 不 知道 并 不 表示 没有 
用 。 一 旦 掌握 透彻 了 ， 你 会 发 现 ， 本 来 很 矿 烦 的 实现 原来 可 以 这 么 们 
单 地 实现 ;你 会 发 现 ， 当 遇 到 一 些 环 手 问 题 的 时 候 ， 多 了 一 种 解 题 思 
路 ， 如 此 等 等 。 


那 z-ijndex 具 体 的 表现 规则 又 是 走样 的 呢 ? 


很 多 人 〈 包 括 我 ) 一 开始 的 时 候 ， 以 为 一 个 定位 元 素 设置 z- 
index 负 值 ， 就 会 跑 到 页 面 的 表 后 ， 隐 藏 掉 ， 看 不 到 了 “。 绪 果实 际 上 
是 有 时 候 确 实 隐 沽 了， 但 有 时候 又 隐 沁 不 挥 。 为 什么 会 这 样 ? 


因为 z-index 负 值 的 最 终 表现 并 不 是 单一 的 ， 而 是 与 “ 层 琶 上 下 
文 " 和 “ 层 共 顺序 ”密切 相关 。 前 面 展 示 的 层 合 顺序 规则 7 阶 图 ， 其 中 最 下 
面 的 2 阶 是 理解 z-index 人 负 值 表现 的 关键 ， 如 图 7-12 所 示 。 


层 熙 上 下 文 
background/border 


block 块 状 水 平 盒子 


图 7-12 “ 层 县 顺序 ”最 底层 2 阶 


图 7-12 中 已 经 很 明显 地 标明 了 ，z-index 负 值 元 素 的 层级 是 在 层 
登 上 下 文 元 素 上 面 、b1lock 元 素 的 下 面 ， 也 就 是 z- Index 虽然 名 为 负 
数 层 级 ， 但 依然 无 法 突破 当前 层 琶 上 下 文 所 包 训 的 小 世界 。 


我 们 通过 下 面 几 个 小 例子 加 深 一 下 理解 。 首 和 多 HTML 都 是 一 致 的 ， 
hs 


<div class="box"> 
<img src="1.jpg"> 


</div> 


先 看 下 面 的 CSS 代 码 : 


,box { 
background-color: blue; 


,box > img { 


position: relative; 
z-index: -1; 
right: -S50px; 


此 时 .box 十 一 个 普 普 通通 的 元 素 ， 图 片 元 素 所 在 的 层 合 上 下 文 元 
素 一 定 是 .box 的 某 个 祖先 元 素 。 好 了 了， 知道 这 么 多 足够 了 ， 现 在 再 回 
顾 一 下 刚刚 出 现 的 图 7-13 所 示 的 这 张 图 。 


图 7-13 中 非常 明显 地 标明 了 z-index 负 值 在 bDlock 元 素 的 下 面 。 
本 例 中 ， 图 片 是 z-index 负 值 元 素 ，.box 是 block 元 素 ， 也 就 是 图 片 
应 该 在 . box 元素 的 后 面 显 示 ， 因 此 ， 图 片 会 被 ,box 元素 的 蓝 色 背景 
盖 。 最 后 的 结果 确实 如 此 ， 如 图 7-14 所 示 。 


层 熙 上 下 文 
background/border 


block 块 状 水 平 盒子 


图 7-13 z-index 负 值 在 block 元 素 下 面 


图 7-14 图 片 在 赣 色 背景 色 之 下 


现在 ， 我 们 给 .box 元 系 加 个 样式 ， 使 其 具有 层 琶 上 下 文 。 很 多 
CSS 属 性 都 可 以 ， 我 们 这 里 束 使 用 不 影响 视 锁 表现 的 transform 属 性 
示意 如 下 : 

.box { 
background-color: blue; 
transform: scale(1); 


.box > img { 


position: relative; 
z-index: -1; 
right: -50px; 


CSS3 transform 可 以 让 元 素 具 有 新 的 层 琶 上 下 文 ， 于 是 ， 对 照 
图 7-15， 非 常 明 显 地 标明 了 z -index 负 值 在 层 和 上 下 文 元 素 的 背景 
之 上 ， 也 就 是 说 ， 这 里 z-index 是 负 值 的 图 片 元 素 应 该 在 .box 元 素 的 
上 面 。 最 后 的 结果 确实 如 此 ， 如 图 7-16 所 示 。 


层 熙 上 下 文 
background/border 


block 块 状 水 平 盒子 


图 7-15 z-index 负 值 在 “ 层 琶 上 下 文 ? 之 上 


图 7-16 ”图片 在 赣 色 背景 色 之 上 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/7/6-1.php 或 者 扫 右 侧 的 
二 维 码 。 


可 以 这 么 说 ，z-index 负 值 泻 染 的 过 程 束 是 一 个 寻找 第 一 个 层 县 
上 下 文 元 素 的 过 程 ， 然 后 层 谷 顺序 止步 于 这 个 层 谷 上 下 文 元 素 。 


明白 了 这 一 点 ， 就 可 以 理解 为 何 z-index 负 值 隐藏 元 素 有 时 候 确 
实 隐藏 ， 但 有 时 候 又 隐藏 不 挤 了 。 


那 z-index 负 值 在 实际 项 目 中 有 什么 用 呢 ? 具体 作用 如 下 。 


(1) 可 访问 性 隐藏 > z-index 负 值 可 以 隐藏 元 素 ， 只 需要 层 苔 上 
下 文 内 的 某 一 个 父 元 素 加 个 背景 色 惑 可以。 它 与 cLip 隐 藏 相 比 的 一 个 
优势 是 ， 元 素 无 须 绝对 定位 ， 设 置 position:relative 也 可 以 隐 
藏 ， 男 一 个 优势 是 它 对 原来 的 布局 以 及 元 素 的 行为 没有 任何 影响 ， 而 
clip 隐 藏 会 导致 控件 focus 的 焦点 发 生 细微 的 变化 ， 在 特定 条 件 下 是 
有 体验 问题 的 。 它 的 不 足 之 处 就 是 不 具有 普遍 适用 性 ， 需 要 其 他 元 素 
配合 进行 隐藏 。 


(2) 下 8 下 的 多 背景 模拟 。CSS3 中 有 一 个 多 背景 特性 ， 就 是 一 个 
background 可 以 写 多 个 背景 图 。 虽 然 正 8 浏览 器 不 支持 多 背景 特性 ， 
但 是 IE8 浏 览 器 支持 伪 元 素 ， 于 是 ， 正 8 理论 上 也 能 实现 多 背景 ， 这 个 
背景 最 多 3 个 ， 好 在 绝 大 多 数 场 景 3 个 背景 图 足 作 。 最 麻烦 的 其 实 是 这 
个 伪 元 素 生 成 的 背景 一 定 是 使 用 absolute 绝 对 定位 ， 以 免 影 响 内 容 的 
布局 。 于 是 问题 来 了 ， 绝 对 定位 会 覆盖 常规 的 元 素 ， 此 时 则 必须 借助 
zZ-index 负 值 ， 核 心 CSS 代 码 如 下 : 


.box { 
background-image: (1.png); 
position: relative; 
z-index: 0; /* 创建 层 堵 上下文 */ 
} 


.box:before, 

.box:after { 
content: ''; 
position: absolute; 
z-index: -1; 


} 
.box:before { 
background-image: (2.png); 


} 
.box:after { 
background-image: (3.png); 


此 时 ， 束 算 .box 元 素 里 面 古 纯 文字 ， 伪 元 素 图 片 照样 在 文字 下 
面 ， 如 此 广泛 的 适用 场景 使 上 面 的 处 理 几乎 可 以 作为 通用 的 多 百 景 模 
拟 实现 准则 来 实现 了 : 


<div class="box"> 我 是 一 段 纯 文 字 , , .</div> 


(3) 定位 在 元 素 的 后 面 。 我 们 直接 看 一 个 模拟 纸张 效果 的 例子 ， 
该 效果 的 亮点 是 纸张 鸭 边 角 有 卷 起 来 的 效 末 ， 因 为 撒 边 的 阴影 看 起 来 
更 有 角度， 如 图 7-17 所 示 。 如 果 图 7-17 因 打印 原因 看 得 不 真切 的 话 ， 可 
以 手动 输入 http://demo.cssworld.cn/7/6-1.php 或 者 扫 下 面 的 二 维 码 亲 自 感 
守 一 下 族 坟 


图 7-17 ”纸张 边 角 卷 起 来 的 阴影 
HTML 结 构 大 致 如 下 : 


<div class="container"> 
<div class="page"> 标 题 和 内 容 </div> 


</div> 


其 中 ，,container 是 灰色 背景 元 素 ，. page 是 黄色 背景 的 纸张 元 
素 ， 关 键 CSS 如 下 : 


.Ccontainer { 
background-color: #666; 
/* 创建 层 营 上 下 文 */ 
position: relative; 
z-index: 0; 

} 

:page { 
background-color: #f4f39e; 
position: relative; 


} 
/* 边 角 卷 边 阴影 */ 
,page:before， .page:after { 
content: "",， 
width: 90%; height: 20%; 
box-shadow: © 8px 16px rgba(0,o0,0,.3); 
position: absolute; 
/* 层 琶 上下文 (灰色 背景 ) 之 上 ， 定 位 元 素 (黄色 纸张 ) 之 下 */ 


z-index: -1; 


} 
/* 边 角 卷 边 阴 影 定 位 和 角度 控制 */ 
,page:before { 
transform: skew(-1i5deg) rotate(-5deg ) 
transform-origin: left bottom; 
left: 0; bottom: 0; 


.page:after { 


transform: skew(15deg) rotate(5deg ) ， 
transform-origin: right bottom; 
right: 0; bottom: ©; 


.Ccontainer 灰 色 背 景 通过 position:relative;z-index :0 创建 
了 层 和 于 上下文，.page 仅 有 position:relative 而 没有 设置 z- 
index 值 ， 因 此 只 能 算 z-index:auto 程 度 的 定位 元 素 ， 于 是 ，z- 
index: -1 两 个 边 角 阴 影 就 完美 地 藏 在 了 层 琶 上 下 文 (灰色 背景 ) 之 
、 普通 定 位 元 素 (黄色 纸张 ) 之 下 (如 图 7-18 所 示 标 注 ) ， 隐 藏 了 丑 
陋 的 细节 ， 展 示 了 完美 的 边 角 阴 影 ， 实 现 了 最 终 细 腻 的 样式 效果 。 


二 一 灰色 蕴 各 


background/border < 
Pi 一边 角 仿 元 蒜 阴 最 


z-index'auto 或 看 成 Z- 


图 7-18 z-index:-1 边 角 阴影 在 本 案例 中 的 层 闭 顺 序 位 置 


7.7 z-index“ 不 犯 二 ”准则 


此 准则 内 容 如 下 : 对 于 非 浮 层 元 素 ， 避 免 设置 z-index 值 ，z- 
index 值 没有 任何 道理 需要 超过 2。 由 于 z-index 不 能 超过 2， 因 此 ， 
我 称 其 为 “不 犯 二 ”准则 。 


这 是 一 条 经 验 准 则 ， 可 以 有 效 降低 日 后 遇 到 z-index 样式 问题 的 
风险 。 
先 讲 一 下 为 什么 需要 这 个 准则 。 


(1) 定位 元 素 一 旦 设置 了 z-index 值 ， 就 从 普通 定位 元 素 变 成 了 
层 到 上 下 文 元 素 ， 相 互 间 的 层 三 顺序 就 发 生 了 根本 的 变化 ， 很 容易 出 
现 设置 了 巨大 的 z-index 值 也 无 法 履 盖 其 他 元 素 的 问题 。 


(2) 避免 z-index“ 一 山 比 一 山高 * 的 样式 混乱 问题 。 此 问题 多 发 
生 在 多 人 协作 以 及 后 期 维护 的 时 候 。 例 如 ，A 小 图 标定 位 ， 习 惯性 写 了 
个 z-index:9; B 一 看 ， 目 己 原来 的 实现 被 覆盖 了 ， 立 马 写 了 个 z- 
index:99; 结果 比 弹 框 组 件 层 级 还 高 ， 那 还 得 了 ， 立 马 弹 框 组 件 来 一 
个 z-index:999999; 谁 知 后 来 ， 弹 框 中 义 要 有 出 错 提 示 效 果 ..….…... 显 
然 ， 最 后 项 目的 z-index 层级 管理 就 是 一 团 糟 。 


如 果真 的 了 解 了 本 章 的 内 容 ， 你 就 会 发 现 ， 原 来 自己 的 代码 中 很 
大 一 部 分 z-index 设置 都 是 多 余 的 ， 不 仪 浪费 代码 ， 还 埋 下 样式 问题 
风险 ， 尤 其 那 种 使 用 absolute 绝 对 定位 必 使 用 z-index 的 做 法 是 最 
轧 椅 的。 


如 采 DOM 顺 序 确实 无 法 调整 ， 不 得 不 使 用 z-index 值 ， 请 记 住 ， 
z-index 不 要 超过 2， 不 古 不 能 ， 而 十 没有 必要 。 我 从 业 这 么 多 年 ， 巡 


到 很 多 很 复杂 的 与 定位 相关 的 交互 场景 ,但 z-index 最 多 止步 于 2。 如 
果 你 的 定位 发 现 必 须 z-index:3 或 者 以 上 才能 满足 效果 ， 建 议 你 检查 
目 己 的 代码 ， 试 试 应 用 “relative 的 最 小 化 原则 ”来 实现 ， 试 试 利用 元 
素 原生 的 层 肝 顺序 进行 层级 控制 ， 等 等 。 

很 重要 的 一 点 ， 我 这 里 的 “不 犯 二 ”准则 ， 并 不 包括 那些 在 页 面 上 


味 来 味 去 的 元 素 定 位 ， 弹 框 、 出 错 握 示 、 一 些 下 拉 效 果 等 都 不 受 这 一 
准则 限制 。 


对 于 这 类 JavaScript 葛 动 的 浮 层 组 件 ， 我 会 借助 “层级 计数 万 ?来 管 
理 ， 原 因 如 下 : 


(1) 总 会 遇 到 意 想 不 到 的 高 层级 元 素 ; 
(2) 组 件 的 覆盖 规则 具有 动态 性 。 


所 谓 “ 层 级 计数 器 ”， 实 际 上 就 是 一 段 JavaScript 脚 本 ， 会 过 历 所 有 
<body> 处 于 显示 状态 的 子 元 素 ， 并 得 到 最 大 z -ijndex 值 ， 和 默认 的 
z-index 做 比较 。 如 果 超 出 ， 则 显示 的 组 件 的 z-index 自动 加 1， 这 
样 就 不 会 出 现 有 组 件 被 其 他 组 件 履 盖 的 问题 ， 如 果 不 超出 ， 束 使 用 默 
认 的 z-index 值 ， 我 习惯 设 成 9， 因 为 遵循 “不 犯 二 ”准则 的 情况 下 ，9 
已 经 是 个 足够 安全 的 值 了 ， 浮 层 组 件 根本 无 须 担 心 会 被 页 面 上 某 个 元 
素 层级 覆盖 。 


此 刻 天 家 不 妨 想 想 目 己 的 项 目 ， 如 采 所 有 的 浮 层 相关 的 组 件 容 郁 
的 z-index 默 认 值 是 9， 会 不 会 出 现 样 式 问 题 。 如 采 狗 得 层级 太 低 不 敢 
想象 ， 则 说 明 你 的 项 目 层级 这 块 还 有 较 大 改进 的 空间 。 


页 面 上 主体 元 素 齐 循 z- index“ 不 犯 二 ?准则 ， 浮 层 元 素 使 用 z- 
index“ 层 级 计数 大 ”>， 双 管 齐 下 ， 从 此 和 z- index 问 题 说 拜拜 ! 


第 8 章 ”强大 的 文本 处 理 能 力 


时 势 造 英雄 。 在 我 上 学 那 会 儿 ， 网 络 市 宽 受 限 ， 电 脑 性 能 低下 ， 
在 这 种 大 背景 下 ， 重 文字 内 容 的 展示 是 比较 符合 现实 情况 的 ， 要 是 去 
搞 个 直播 网 站 ， 多 半 “ 卡 巴 斯 基 ( 卡 吧 死机 ) ”， 所 以 在 那个 时 代 背 景 
下 ， 什 么 技术 能 够 非常 方便 地 进行 文本 处 理 和 文本 展示 ， 那 这 个 技术 
一 定 能 够 普及 和 兴盛 。 


CSS 就 是 凭借 自身 强大 的 文本 处 理 和 文本 展示 能 力 成 为 样式 布局 
的 标杆 语言 的 。 同 时 代 的 SVG 的 优势 在 于 图 形 展示 ， 它 在 文本 处 理 这 
一 块 实在 是 不 敢 茶 维 。 比 方 说 简单 的 文字 边缘 目 动 换行 ， 在 CSS 流 的 
概念 里 几乎 可 以 说 是 天 生 的 、 理 所 当然 的 ， 但 在 SVG 里 面 ， 完 全 束 是 
撞 了 南 墙 也 不 回头 啊 ! 必须 要 手动 点 拨 一 下 才 行 。 


当然 ， 随 着 现在 软 便 件 的 提升 ， 人 们 对 互联 网 的 需求 已 经 不 仅仅 
局 限于 简单 的 图 文 展示 了 ， 此 时 ，SVG 以 及 canvas 等 技术 开始 迎 来 自 
己 的 春天 。 


CSS 文 本 处 理 能 力 之 所 以 强大 ， 一 方面 是 其 基础 概念 ， 例 如 块 级 
盒 模 型 和 内 联 盒 模型 ， 就 是 为 了 让 文本 可 以 如 文档 般 目 然 呈 现 ， 力 一 
方面 古 有 非常 非 第 多 与 文本 处 理 相关 CSS 属 性 的 文 持 。 而 本 草 忠 将 着 
重 介 绍 这 些 CSS 属 性 一 些 可 能 不 为 人 知 的 地 方 。 


8.1 line-height 的 另外 一 个 朋友 font - 
S1Ze 


第 5 章 介绍 过 Line-height 和 vertical-align 的 好 朋友 关系 ， 
实际 上 ，font -size 也 和 1line-height 是 好 朋友 ， 同 样 也 无 处 不 
在 ， 并 且 纸 面 上 Line-height 的 数值 属性 值 和 百分比 值 属性 值 都 是 
相对 于 font -size 计 算 的 ， 其 关系 可 谓 不 言 而 喻 。 


现在 有 意思 了 ， 所 谓 朋友 的 朋友 也 是 朋友 ， 那 font -size 和 
vertical-align 是 不 是 也 是 朋友 呢 ? 


8.1.1 font-size 和 vertical-align 的 隐秘 故事 


line-height 的 部 分 类 别 属性 值 是 相对 于 font-size 计 算 的 ， 
vertical-align 百 分 比值 属性 值 又 是 相对 于 Line-height 计 算 
的 ， 于是， 看 上 去 八 蕴 子 都 搭 不 上 边 的 vertical- align 和 font - 
size 属 性 背后 其 实 也 有 有 着 关联 的 。 


例如 ， 下 面 的 CSS 代 码 组 合 : 


pi 
font-size: 16px; 
line-height: 1.5; 


p > img { 
vertical-align: -25%; 


此 时 ，p > img 选 择 器 对 应 元 素 的 vertical-align 计 算 值 应 该 


16px * 1.5 * -25% = -6px 
也 就 是 上 面 的 CSS 代 码 等 同 于 : 


pi 
font-size: 16px; 


line-height: 1.5; 


} 
p > img { 
vertical-align: -6px; 


但 是 两 者 又 有 所 不 同 ， 很 显然 ，-25% 是 一 个 相对 计算 属性 值 ， 如 
末 此 时 元 素 的 font-size 发 生变 化 ， 则 图 乒 会 目 动 进行 垂直 位 置 调 
整 。 我 们 可 以 看 一 个 无 论 font -size 如 何 变化 、 后 面 图 标 都 牌 直 居中 
对 齐 的 例子 ， 手 动 输入 http://demo.cssworld.cn/8/1-1.php 或 者 扫 下 面 的 
二 维 码 。 可 以 看 到 ， 无 论文 字 字 号 是 大 还 是 小 ， 后 面 的 图 标 都 非常 民 
好 地 垂直 居中 对 齐 ， 如 图 8-1 所 示 。 


文字 侧 


又 


ul 


图 8-1 永远 


核心 CSS 代 码 如 下 : 


p > img { 
width: 16px; height: 16px; 
vertical-align: 25%; 


position: relative; 
top: 8px; 


原理 如 下 : 内 联 元 素 默 认 基 线 对 齐 ， 图 片 的 基线 可 以 看 成 是 图 片 
的 下 边缘 ， 文 字 内 容 的 基线 是 字符 x 下 边缘 ， 因 此 ， 本 例 中 ， 图 片 下 边 
缘 默 认 和 “中 文 * 两 个 汉字 字形 底 边 缘 往 上 一 点 的 位 置 对 齐 。 然 后 ， 我 
们 通过 vertical-align:25% 声 明 让 图 片 的 下 边缘 和 中 文 汉 字 的 中 
心 线 对 齐 。 此 时 ， 图 标 和 文字 的 状态 应 该 如 图 8-2 所 示 。 


文字 


图 8-2 ”图 片 下 边缘 和 文字 中 心 线 对 齐 标 注 示 意 


图 8-2 完 全 就 是 实例 效果 注释 top :8px 后 的 截图 标注 ， 没 有 任何 加 
工 。 看 上 去 似乎 上 面 小 ， 实 际 上 是 视觉 广 差 ， 分隔 线 上 下 完全 均等 ，1 
像素 不 莽 。 


由 于 我 们 这 里 的 图 标 是 固定 的 像素 尺寸 ， 因 此 ， 通 过 偏 移 自身 
1/2 高 度 来 实现 真正 的 大 中， 可 以 使 用 CSS3 transform 位 移 ， 我 这 
里 为 了 兼容 人 性， 使 用 了 relative 相 对 定位 。 


其 居中 原理 本 质 上 和 绝对 定位 元 素 50% 定 位 加 偏 移 自 身 1/2 尺 寸 
实现 大 中 是 一 样 的 ， 只 不 过 这 里 的 偏 移 使 用 的 是 vertical-align 百 
分 比值 。 


这 么 一 看 ，vertical-align 百 分 比 属性 值 似乎 还 是 有 点 用 的 ! 
如 果 再 联想 到 vertical-align:middle 实 现 垂直 居中 效果 经 常 不 
尽 如 人 意 ， 说 不 定 还 能 找到 一 块 更 好 的 宝 。 但 我 要 告诉 你 ， 其 实 还 有 
更 好 的 实现 ， 那 就 是 使 用 单位 ex。 例 如 ， 将 前 面 例子 中 的 
vertical-align:25% 改 成 vertical-align: .6ex， 效 果 基 本 上 
就 是 一 样 的 ， 并 且 还 多 了 一 个 优点 ， 就 是 使 用 vertical- 
align: .6ex 实 现 的 垂直 居中 效果 不 会 受 1ine-height 变 化 影响 ， 
而 使 用 vertical-align:25%，1line-height 一 旦 变化 ， 就 必须 改 
变 原 来 的 vertical-align 大 小 、 重 新 调整 垂直 位 置 ， 这 容错 性 明显 
就 降 了 一 个 层次 。 


因此 ， 虽 然 例子 演示 的 是 vertical-align 百 分 比值 ， 实 际 上 是 
推荐 使 用 与 font -size 有 着 密切 关系 的 ex 单位 。 


说 到 这 里 ， 忍 不 住 想 介 绍 男 外 一 些 和 font-size 有 着 密切 的 关系 
的 东西 。 


8.1.2 ”理解 font -size 与 ex、em 和 rem 的 关系 


ex 是 字符 x 高 度 ， 显 然 科 font - Size 关系 密切 ，font- size 值 越 
大 ， 自 然 ex 对 应 的 大 小 也 就 大 ， 对 此 本 书 前 面 已 经 有 介绍 ， 这 里 不 玖 


述 。 


下 面 来 看 看 单位 em。 如 采 说 ex 是 字符 X 高 度 ， 那 是 不 是 em 丈 是 字 


符 m 的 高 度 ? 


我 的 回答 是 “不 是 的 ”， 但 是 em 和 字符 mm 确实 有 关 。em 在 传统 排版 
中 指 一 个 字模 的 高 度 (可 以 脑 补 下 活字 印刷 的 字模 ) ， 注 意 是 字模 的 
高 度 ， 不 是 字符 的 高 度 。 其 一 般 由 'M' 的 宽度 决定 《因为 宽 高 相 
同 ) ， 所 以 叫 em。 也 就 是 说 ， 之 所 以 叫 作 em 完全 取决 于 M 的 字形 ， 毕 
竟 英 文 26 个 字母 方 方 正 正 的 不 算 多 。 如 采 按 照 这 种 说 法 ， 那 方 方 正 正 
的 汉字 电 不 是 每 一 个 字 都 正好 一 个 em? 没 错 ， 确 实 古 这 样 ， 尤 其 作为 
印刷 体 的 宋体 效果 最 为 明显 ， 这 种 表现 在 CSS 中 也 有 非常 明显 的 体 
现 。 


例如 ， 浏 览 器 默认 font-size 大 小 是 16px， 假 设 一 个 <div> 宽 
度 是 169px， 则 正好 可 以 放下 10 个 汉字 不 换行 ， 如 果 是 159px 像 素 ， 
第 十 个 汉字 就 会 掉 下 来 ， 如 果 再 同时 设置 1ine-height:1 和 一 个 背 
景色 ， 代 码 如 下 : 


div { 
width: 160px; 


line-height: 1; 
background-color: #eee; 


我 们 头 会 发 现 中 文 汉 字 的 太 才 吕 可 以 看 作 em 单 位 的 代名词 ， 尤 其 在 高 
度 这 一 块 ， 人 简直 分 蝶 不 莹 ， 如 图 8-3 所 示 。 


中 文中 文中 文中 文中 文 


图 8-3 ”汉字 尺寸 和 em 单位 关系 示意 


也 就 是 说 ，em 就 是 ' 中 ' 等 汉字 的 高 度 ! 于 是 ， 我 们 对 em 的 理解 
就 更 加 简单 了 ， 直 接 看 一 个 很 容易 理解 错误 的 题目 ， 在 Chrome 浏 览 器 
下 ，<h1> 元 素 有 如 下 的 默认 CSS: 


hi { 
font-size: 2em; 


-webkit-margin-before: 0.67em; 
-webkit-margin-after: 0.67em; 


那么 ， 假 设 页 面 没 有 任何 CSS 重 置 ， 根 元 素 font -size 就 是 默认 的 
16px， 请 问 : 此 时 <h1> 元 素 margin-before 的 像素 计算 值 是 多 


少 ? 


如 果 对 em 了 解 不 够 ， 很 容易 认为 1em 大 小 就 是 16pX， 于 是 计算 值 
是 16pxx90,67 = 10.72px， 实 际 上 这 是 错误 的 。 


我 们 可 以 这 样 想 ， 假 设 <h1> 里 面 有 汉字 ， 此 时 汉字 的 高 度 是 多 
少 ? 这 个 高 度 就 是 此 时 1em 大 小 。<h1> 元 素 此 时 font -size 是 2em， 
算 一 下 就 是 32pXx， 因 此 ， 此 时 里 面 汉 字 的 高 度 应 该 是 32pX， 也 就 是 
说 ， 此 时 <h1> 元 素 的 lem 应 该 是 32px， 于 是 margin-before 的 像素 


计算 值 为 32pxx0.67 = 21.44px， 和 浏览 器 自己 的 计算 值 一 样 ， 如 
图 8-4 所 示 。 


bp -webkit-margin-after 21.44px 
= -webkit-margin-before 21.44px 
> -webkit-margin-end 8px 
> -webkit-margin-start Opx 


图 8-4 Chrome 浏 上 器 <h1> 元 素 margin 计 算 值 


乍 一 看 ， 似 乎 出 现 了 死 循 环 悖 论 : font -Size:2em， 于 是 1em 
变 成 32px， 那 此 时 的 2em 不 义 是 64px， 然 后 义 ..…..…. 


正如 前 面 提 到 过 的 一 样 ，CSS 世 界 的 演 染 是 一 次 泻 染 ， 是 不 会 
死 循环 的 。 这 里 是 先 计算 font -size， 然 后 再 计算 给 其 他 使 用 em 单 
位 的 属性 值 大 小 。 


总 结 如 下 : 在 CSS 中 ，1em 的 计算 值 等 同 于 当前 元 素 所 在 的 
font-size 计 算 值 ， 可 以 将 其 想象 成 当前 元 素 中 (如 采 有 ) 汉字 的 高 
度 。 


所 有 相对 单位 的 好 处 都 是 一 样 的 ， 样 式 表现 更 具有 弹性 。 例 如 ， 
理论 上 ， 有 一 个 布局 ， 硕 望 小 屏 时 整体 缩小 ， 大 屏 时 再 弹性 扩大 ， 此 
时 束 可 以 让 所 有 元 素 宽 高 尺寸 等 都 使 用 em， 于 是 ， 最 后 只 要 改变 布局 
祖先 元 素 的 font - size 大 小 哆 可 以 实现 整体 的 弹性 变化 。 


这 种 策略 很 棒 ， 也 确实 可 行 ， 但 是 有 一 个 比较 麻烦 的 事情 ， 它 和 
上 面 <h1> 元 素 计算 一 样 的 麻烦 ，em 是 根据 当前 font - size 大 小 计算 
的 ， 一旦 布局 中 出 现 标题 这 种 跟 基 础 font - Size 大 小 不 一 样 的 场景 的 


时 候 ， 标 题 里 面 所 有 元 系 em 都 要 重新 计算 一 过 ， 甚 为 麻烦 ， 最 终 的 成 
品 维护 成 本 整 比 较 高 了 。 


正 是 由 于 这 种 局 限 性 ， 另 外 一 个 和 font -size 和 密切 相关 的 单位 出 
现 了 ， 就 是 rem， 即 root em， 顾 名 思 义 ， 束 是 根 元 素 em 大 小 。em 相 对 
于 当前 元 素 ，rem 相 对 于 根 元 素 ， 本 质 差别 在 于 当前 元 素 是 多 变 的 ， 
根 元 素 是 固定 的 ， 也 就 是 说 ， 如 果 使 用 rem， 我 们 的 计算 值 不 会 受 当 
前 元 素 font -Size 大 小 的 影响 ， 假 设 <h1> 的 默认 CSS 是 这 样 : 
hi 1 

font-size: 2em; 


-webkit-margin-before: 0.67rem; 
-webkit-margin-after: 0.67rem; 


} 


那么 2m 的 font -size 计 算 值 会 被 忽略 ， 直 接 使 用 根 元 素 的 16px 进 行 
计算 ， 于 是 margin- before 计 算 值 是 16 像 素 x0.67 = 10.72 像 素 。 


因此 ， 要 想 实现 带 有 缩放 性 质 的 弹性 布局 ， 使 用 rem 是 最 佳 策 
略 ， 但 rem 是 CSS3 单 位 ，IE9 以 上 浏览 器 才 支 持 ， 需 要 注意 兼容 性 ， 我 
这 里 就 不 再 多 介绍 了 。 


回 到 em 单位 。 em 实际 上 更 适用 于 图 文 内 容 展示 的 场景 ， 对 此 进行 
弹性 布局 。 例 如 ，<h1>~ 人 <h6> 以 及 <p> 等 与 文本 内 容 展示 的 元 素 的 
margin 都 是 用 em 作为 单位 ， 这 样 ， 当 用 户 把 浏览 需 默 认 字号 
从 “中 ”设置 成 “< 大 ”或 改 成 “小 ”的 时 候 ， 上 下 间距 也 能 根据 字号 大 小 自 
动 调整 ， 使 阅读 更 舒服 。 


再 举 个 适用 于 em 的 场景 ， 如 果 我 们 使 用 SVG 矢量 图 标 ， 建 议 设 置 
SVG 宽 高 如 下 : 


svg { 
width: 1iem; height: 1em， 
} 


这 样 ， 无论 图 标 是 个 大 号 文字 混在 一 起 还 是 和 小 号 文字 混在 一 起 ， 痢 
能 和 当前 文字 大 小 保持 一 致 ， 既 省 时 又 省 力 。 


8.1.3 ”理解 font -size 的 关键 字 属 性 值 


font -size 支 持 长 度 值 ， 如 1em， 也 支持 百分比 值 ， 如 100% 。 
这 两 点 想必 众所周知 ， 但 font -size 还 支持 关键 字 属 性 值 这 一 点 怕 是 
就 有 不 少 人 不 清楚 了 。 


font-size 的 关键 字 属 性 值 分 以 下 两 类 。 


(1) 相对 尺寸 关键 字 。 指 相对 于 当前 元 素 font -size 计算 ， 包 
括 : 


。1larger: 大 一 点 ， 是 <big> 元 素 的 默认 font- size 属性 值 。 
。 Smaller: 小 一 点 ， 是 <small> 元 素 的 默认 font-size 属 性 
值 。 


(2) 绝对 尺寸 关键 字 。 与 当前 元 素 font -size 无 天， 仅 受 浏览 
绥 设 置 的 字号 影响 。 注 意 这 里 的 措 蔷 ， 征 “浏览 着 设 置 "”， 而 非 “ 根 元 
素 "， 两 者 是 有 区 别 的 。 


。Xxx-large: 好 大 好 大 ， 和 <h1> 元 素 计 算 值 一 样 。 

。Xx-large: 好 大 ， 和 <h2> 元 素 计算 值 一 样 。 

。 arge: 大 ， 和 <h3> 元 素 计 算 值 近似 (“近似 * 指 计算 值 偏差 在 1 
像素 以 内 ， 下 同 ) 。 

。medium: 不 上 不 下 ， 是 font-size 的 初始 值 ， 和 <h4> 元 素 计算 
值 一 样 。 为 了 解决 大 家 可 能 有 的 疑问 ， 这 里 有 必要 多 说 几 句 。 如 
果 font -Size 默认 值 是 medium， 而 medium 计 算 值 仅 与 浏览 器 
设置 有 关 ， 那 为 何 我 们 平时 元 素 font - size 总 是 受 环境 影响 变 来 
变 去 呢 ? 


这 完全 是 因为 font -size 属 性 的 继承 性 ， 实 际 开 发 的 时 候 ， 我 们 
常会 对 <html> 或 <body> 重 置 font -size 大 小 ， 例 如 : 
body { 


font-size: 14px; 


} 


于 是 ， 受 继承 性 影响 ， 大 多 数 后 代 元 素 的 font -size 计 算 值 也 变 
成 了 14px，medium 这 个 初始 值 受 继承 性 影响 而 被 覆盖 了 。 


。 smal1: 小 ， 和 <h5> 元 素 计 算 值 近似 。 
x-small: 好 小 ， 和 <h6> 元 素 计 算 值 近似 。 
xx-small: 好 小 好 小 ， 无 对 应 的 HTML 元 素 。 


其 中 ， 相 对 尺寸 关键 字 larger 和 smaller 由 于 计算 的 系数 在 不 
同 浏览 器 下 差异 很 大 ， 因 此 实用 价值 有 限 ， 只 有 类 似 文 档 页 、 帮 助 页 
这 类 对 文字 尺寸 要 求 不 高 的 场合 才 有 用 ; 而 绝对 尺寸 关键 字 的 实用 性 


要 大 一 些 ， 而 且 在 某 些 场合 是 推荐 使 用 的 关键 字 属 性 值 ， 这 个 要 慢 慢 
讲 。 
首先 ， 我 抛 出 一 个 简单 的 问题 : 下 面 两 个 CSS 代 码 有 什么 区 别 ? 


html { 
font-size: 14px; 


} 
html { 


font-size: 87.5%; 
} 


在 绝 大 多 数 场 景 下 ， 两 者 没有 差别 ， 全 都 计算 为 14px， 但 是 如 果 
用 户 对 浏 蜗 絮 的 字号 进行 了 调整 ， 例 如 ， 把 默认 的 “中 ”设置 成 
了 “大 ”， 如 图 8-5 所 示 ( 截 自 Chrome 浏 览 器 ) ， 那 么 此 时 ，font - 
size:14px 计 算 值 还 是 14px， 但 font- size:87.5% 的 计算 值 则 大 
了 一 圈 ， 于 是 差别 就 出 现 了 。 如 果 是 像素 单位 font -size， 用 户 改变 
浏 贤 妖 的 默认 字号 后 ， 页 面 会 微 丝 不 动 ， 如果 是 百分比 值 font - 
size， 则 字号 相应 放大 ， 这 就 涉及 用 户 体 验 和 可 访问 性 问题 了 。 


网 络 内 容 
字号 : | 中 v | | 自 定义 字体 ... 
可 小 | 
网 页 缩放 : 极 人 


| 极 大 | 
Google Chrome 会 使 用 愁 计 看 TD 系 玩 代 理 受 重演 接 到 网 络 。 


图 8-5 “Chrome 浏览 器 设置 网 页 内 容 的 字号 为 大 


正常 情况 下 ，14 像 素 的 文字 大 小 是 足够 的 ， 但 是 ， 如 采 是 高 度 近 
视 的 用 户 ， 或 者 上 班 急 急忙 忙 还 记 戴 眼镜 ， 或 者 在 投影 仪 上 投影 网 页 


内 容 ， 此 时 就 有 大 字号 浏览 网 页 的 需求 ， 如 有 果 使 用 固定 的 像素 单位 ， 
显然 对 这 些 使 用 场景 是 不 友好 的 。 


好 在 浏览 锅 还 提供 了 “网 页 缩放 ?功能 ， 但 是 此 功能 也 是 有 局 限 性 
的 : 如 果 网 页 是 定 因 非 啊 应 式 的 ， 则 网 页 放大 后 窗 体 以 外 的 内 容 束 看 
不 到 了 ， 在 Chrome/Firefox 浏 览 厦 下 甚至 连 个 水 平 滚动 条 都 没有 ， 说 不 
定 重 要 信息 就 会 看 不 到 。 由 此 可 见 ， 我 们 是 不 能 轻易 忽视 浏览 郁 字 号 
设置 功能 的 。 


然而 ， 现 代 网 页 设计 得 很 精致 ， 要 想 网 页 布局 跟随 字体 内 容 缩放 
实在 两 难 ， 要 么 使 用 em， 但 em 计算 与 当前 font-size 厢 合 ， 不 好 维 
护 ， 要 么 使 用 rem， 但 IE8 不 支持 ， 桌 面 端 使 用 槛 罚 。 因 此 ， 现 实 的 压 
过 导致 我 们 只 能 使 用 px 进行 布局 ， 尤 其 桌面 并 网 页 。 


如 何 权衡 “易于 实现 维护 ”视觉 还 原 “ 可 访问 性 ”这 三 者 ， 我 这 里 
有 两 个 珍藏 的 建议 。 


(1) 即使 是 定 宽 的 传统 桌面 端 网 页 ， 也 需要 做 响应 式 处 理 ， 尤 其 
是 针对 1200 像 素 宽 度 设计 的 网 页 ， 但 只 需要 啊 应 到 800 像 素 即 可 ， 可 以 
保证 至 少 有 1.5 倍 的 缩放 空间 ， 如 有 果 做 到 这 一 步 ， 那 么 是 否 需要 啊 应 浏 
姑 器 的 字号 设置 这 一 点 就 可 以 忽略 。 


(2) 如 果 困 各 种 原因 无 法 做 响应 式 处 理 ， 也 没有 必要 全 局 都 使 用 
相对 单位 ， 毕 竞 成 本 等 现实 问题 摆 在 那里 ， 其 实 只 需要 在 图 文 内 容 为 
主 的 重要 局 部 区 域 使 用 可 缩放 的 font - Size 处理 即 可 。 例 如 ， 人 小 说 网 
站 的 阅读 页 、 微 信 公 众 号 文章 展示 区 、 私 信 对 话 内 容 区 、 搜 索引 擎 的 


落地 页 、 评 论 区 等 ， 都 强烈 建议 据 痉 px 单位 ， 而 采用 下 面 的 实践 策 


容器 设置 font-size:medium， 此 时 ， 这 个 局 部 展示 区 域 的 字 
号 职 跟 着 浏览 句 的 设置 走 了 ， 默 认 计算 值 是 16pX。 
容器 


。 容器 内 的 文字 字号 全 部 使 用 相对 单位 ， 如 百分比 值 或 者 em 都 可 
以 ， 然 后 基于 16px 进 行 转换 。 例 如 : 


.article { 
font-size: medium; 


} 

.article hi { 
font-size: 2em; 
margin: .875em 0; 


} 

.article p { 
font-size: 87.5%; /* 默认 字号 下 计算 值 是 14px */ 
margin: 1iem 0; 


同时 使 用 目 适 应 流体 布局 ， 间 距 什 么 的 也 使 用 相对 单位 ， 例 如 上 
面 margin 使 用 的 是 em 单位 。 于 是 ， 当 用 户 改变 了 浏 咒 器 的 字号 后 ， 
整个 阅读 区 域 的 所 有 字样 甚至 布局 都 会 跟着 放大 ， 文 字 一 下 了 于 束 看 清 
楚 了 。 这 种 局 部 处 理 的 好 人 处 在 于 ， 页 面 的 导航 、 侧 边栏 这 些 不 需要 长 
时 间 阅 读 的 模块 还 十 原来 的 像素 布局 ， 还 是 那么 精怪 ， 丝 片 不 受 影 
响 。 就 这 么 很 微小 的 变动 ， 就 可 以 让 你 的 网 页 在 可 访问 性 这 一 块 超越 
大 多 数 的 网 站 ， 何 乐 而 不 为 ? 


可 以 看 到 ， 绝 对 尺寸 关键 字 在 实际 项 目 中 还 有 很 有 价值 的 ， 但 有 
价值 的 仅仅 是 medium， 至 于 其 他 关键 字 ， 作 用 仅 限 于 字面 上 的 那 总 
儿 ， 大 家 了 解 一 下 即 可 。 


8.1.4 font-size:0 与 文本 的 隐藏 

桌面 Chrome 浏 贤 絮 下 有 个 12px 的 字号 限制 ， 就 是 文字 的 font- 
size 计 算 值 不 能 小 于 12px， 我 猪 是 因为 中 文 ， 如 宋体 ， 要 是 小 于 
12pXx， 就 会 挤 成 成 一 团 ， 略 恬 ，Chrome 看 不 下 去 ， 就 直接 禁用 了 。 


正 是 这 种 限制 导致 我 们 在 使 用 em 或 rem 进 行 布 局 的 时 候 ， 不 能 这 
么 处 理 : 


html] { 
font-size: 62.5%; 
} 


理论 上 ， 此 时 根 字号 计算 值 是 16px*0.625=10px， 于 是 ， 
width:14px 可 以 写成 width:1.4em， 省 了 很 多 计算 的 麻烦 。 但 
是 ， 在 Chrome 下， 由 于 12px 的 限制 ， 根 字号 计算 值 实际 不 是 10px， 
而 是 12pX， 所 以 ， 可 以 试 试 处 理 成 这 样 : 


html { 
font-size: 625%; 
} 


此 时 根 字号 计算 值 是 100px， 既 计算 无 优 ， 又 没有 12px 的 最 小 字 
号 限制 。 


但 是 我 个 人 建议 还 是 不 要 这 样 处 理 ， 尤 其 使 用 em 的 时 候 ， 因 为 
font-size 属 性 和 Line-height 属 性 一 样 ， 由 于 继承 性 的 存在 ， 会 
影响 贯穿 整个 网 页 ，100px 的 环境 font -Size 一 定 会 将 平时 不 显 山 露 
水 的 底 边 对 齐 问 题 、 间 际 问 题 等 放大 ， 导 致 出 现 一 些 明显 的 样式 问 
题 ， 如 果 对 CSS 了 解 不 是 很 深刻 ， 怕 是 很 难 明日 为 什么 会 发 生 这 样 的 


问题 。 同 时 这 样 做 也 限制 了 px 等 其 他 单位 的 使 用 ， 有 时 候 是 比较 要 命 
的 。 

因此 ， 我 的 建议 是 仍 基于 浏览 如 默认 的 字号 进行 相对 计算 ， 也 就 
是 medium 对 应 的 16px，16 这 个 数字 是 一 定 可 以 整除 的 ， 因 此 计算 成 
本 还 行 ， 或 者 使 用 Sass 或 Less 之 类 的 工具 辅助 计算 。 


还 是 回 到 字号 限制 的 问题 。 实 际 上 ， 并 不 是 所 有 小 于 12px 的 
font -size 都 会 被 当 作 12px 处 理 ， 有 一 个 值 例 外 ， 那 就 是 0， 也 就 是 
说 ， 如 有 果 font -Size :0 的 字号 表现 就 是 0， 那 么 文字 会 直接 被 隐藏 
掉 ， 并 且 只 能 是 font -size:0， 哪 怕 设 置 成 font- 
size:0.0000001px， 都 还 是 会 被 当 作 12px 处 理 的 。 


因此 ， 如 果 和 希望 隐藏 10go 对 应 元 素 内 的 文字 ， 除 了 text - 
indent 缩 进 隐 藏 外 ， 还 可 以 试 斌 下面 这 种 方法 : 


font-size: 0; 
} 
8.2 ”字体 属性 家 族 的 大 家 长 font -family 


CSS 世 界 中 的 有 很 多 属性 都 是 以 font -开头 的 ， 如 font - 
style、font-weight 和 这 里 要 介绍 的 font-family， 我 把 所 有 这 
些 以 font -开头 的 CSS 属 性 统称 为 “字体 属性 家 族 ”。 就 最 终 的 深度 、 
广度 和 应 用 程度 来 看 ，font - family 有 点 儿 神 似 “ 字 体 属性 家 族 ” 的 大 


家 长 ， 其 实 从 其 名 字 上 就 能 看 出 点 味道 来 ， 顾 名 思 义 ，font - 
family 束 是 “字体 家 族 ” 的 意思 。 


font-family 上 默认 值 由 操作 系统 和 浏 宽 器 共同 决定 ， 例 如 
Windows 和 OS X 下 的 Chrome 默 认 字体 不 一 样 ， 同 一 台 Windows 系 统 的 
Chrome 和 Firefox 浏 览 器 默认 字体 也 不 一 样 。 


font -family 文 持 两 类 属性 值 ， 一 类 是 “字体 名 ”， 一 类 是 “字体 
族 ”。*" 字 体 名 ”很 好 理解 ， 王 是 使 用 的 对 应 字体 的 名 称 。 例 如 : 


body { 
font-family: simsun; 


} 


就 表示 使 用 的 是 “宋体 ”。 如 有 果 字 体 名 包含 空格 ， 需 要 使 用 引号 包 起 
来 。 例 如 : 
body { 


font-family: 'Microsoft Yahei'; 


} 


根据 我 的 实践 ， 可 以 不 用 区 分 大 小 写 。 如 果 有 多 个 字体 设 定 ， 从 左 往 
右 依次 寻找 本 地 是 否 有 对 应 的 字体 即 可 。 例 如 : 


body { 
font-family: "PingFang SC', 'Microsoft Yahei'; 


} 


就 是 先 寻 找 是 否 本 地 有 PingFang SC 人 字体， 如果 没 有 ， 则 继续 寻找 本 地 
征 否 有 Microsoft Yahei 字 体 ， 如 采 都 没 找到 ， 束 使 用 默认 值 。 


但 是 ,“ 字 体 族 ” 分 为 很 多 类 ，MDN 上 文档 分 类 如 下 : 


-family: 
-family: 
-family: 


-family: 
-family: 
-family: 


serif; 
sans-serif; 
monospace; 
cursive; 
fantasy; 
system-ui; 


具体 含义 解释 如 下 。 


。 serif: 衬 线 字体 。 

。 sans-serif: 无 衬 线 字 体 。 
。monospace: 等 宽 字体 。 
。cursive: 手写 字体 。 
。fantasy: 奇幻 字体 。 

。 System-ui: 系统 UI 字体 。 


对 于 中 文 网 站 ，cursive 和 fantasy 应 用 场景 有 限 ， 因 此 这 里 不 
予 探讨 ， 这 里 着 重 介 绍 一 下 衬 线 字体 、 无 衬 线 字体 和 等 宽 字 体 。 
8.2.1 了 解 衬 线 字体 和 无 衬 线 字体 


字体 分 衬 线 字 体 和 无 衬 线 字体 。 所 谓 衬 线 字 体 ， 通 俗 讲 束 是 笔画 
开始 、 结 束 的 地 方 有 额外 装饰 而 且 笔画 的 粗细 会 有 所 不 同 的 字体 。 网 


页 中 常用 中 文 衬 线 字体 是 “宋体 *"， 和 常用 英文 讨 线 字体 有 Times New 
Roman、Georgia 等 。 无 裤 线 字体 没有 这 些 额 外 的 装饰 ， 而 且 笔 画 的 粗 
细 差 不 多 ， 如 中 文 的 “ 雅 黑 疗 体 ， 英 文 包括 Arial、Verdana、Tahoma、 


Helivetica、Calibri 等 。 


以 前 人 们 排 正文 喜欢 使 用 衬 线 字 体 ， 但 是 如 今 ， 不 知 是 审美 疲劳 
还 是 人们 更 加 退 求 简洁 干净 的 缘故 ， 更 喜欢 使 用 无 衬 线 字 体 ， 如 “微软 


雅 黑 "或 者 * 苹 方 "之 类 的 字体 。 


在 CSS 世 界 中 ， 字 体 是 有 对 应 的 属性 值 的 ， 如 下 : 


font-family: serif; /* 衬 线 字 体 */ 


font-family: sans-serif; /* 无 衬 线 字 体 */ 


我 们 在 移动 端 Web 开 发 的 时 候 ， 虽 然 设 备 的 黑 认 中 文字 体 不 一 
样 ， 但 都 是 无 衬 线 ， 都 挺 好 看 的 ， 因 此 可 以 直接 使 用 下 面 的 CSS 代 
码 : 


body { 
font-family: sans-serif; 


} 


没有 必要 特别 指定 中 文字 体 ， 否 则 说 不 定 会 画蛇添足 。 


serif 和 sans-serif 还 可 以 和 具体 的 字体 名 称 写 在 一 起 ， 例 
如 : 
body { 


font-family: "Microsoft Yahei", sans-serif; 


} 


但 是 需要 注意 的 是 ，serif 和 sans-serif 一 定 要 写 在 最 后 ， 
为 在 大 多 数 浏览 器 下 ， 写 在 serif 和 sans-serif 后 面 的 所 有 字体 都 
会 被 忽略 。 例 如 : 
body { 


font-family: sans-serif, "Microsoft Yahei"; 


} 


在 Chrome 浏 览 器 下 ， 后 面 的 Microsoft Yahei 字 体 是 不 会 被 演 染 的 。 据 
我 的 推测 ， 有 可 能 浏览 器 认为 当前 “字体 族 * 已 经 满足 了 文本 演 染 的 需 
要 ， 没 必要 再 往 后 解析 了 。 


8.2.2 ”等 宽 字 体 的 实践 价值 


所 谓 等 宽 字 体 ， 一 般 是 针对 瑞 文 字体 而 言 的 。 据 我 所 知 ， 东 亚 字 
体 应 该 都 是 等 览 的 ， 束 是 每 个 字符 在 同等 font -size 下 占据 的 宽度 是 
一 样 的 。 但 是 英文 字体 殉 不 一 定 了 ， 我 随便 写 一 个 单词 ， 怠 iMac 吧 ， 
大 家 很 明显 地 发 现 这 个 字符 ji 要 比 M 占 据 的 宽度 小 。 如 采 这 样 看 着 还 不 
够 清楚 ， 那 我 换 一 种 呈现 方式 ， 上 下 两 行 ， 上 一 行 6 个 1， 下 一 行 6 个 
M， 如 下 : 


11iiii 
MMMMMM 


实际 的 两 行文 本 的 宽度 可 能 束 如 图 8-6 所 示 这 般 差 异 明显 。 


但 是 ， 如 果 是 等 宽 字 体 (可 以 让 英文 字符 同等 宽度 显示 的 字体 就 
称 为 “等 宽 字 体 ”) ， 如 Consolas、Monaco、monospace， 则 宽度 表现 就 


不 一 样 了 ， 如 图 8-7 所 示 。 


由 器 
MMMMMM 


入 计生 于 生生 
MMMMMM 


图 8-7 ”等 宽 字 体 下 的 效果 


等 宽 字 体 在 Web 中 有 什么 用 呢 ? 
1. 等 宽 字 体 与 代码 呈现 

首先 等 宽 字 体 利于 代码 硅 现 。 对 于 写 代码 的 人 来 说 ， 无 论 是 什么 
语言 ， 易 读 是 第 一 位 ， 使 用 等 宽 字 体 ， 我 们 阅读 起 来 会 更 轻松 舒服 。 
因此 ， 一 般 编 辑 器 使 用 的 字体 或 者 Web 上 需要 呈现 源 代码 的 字体 都 是 
等 冤 了 字体。 例如， 即将 出 现 的 演示 页 面 的 源 代码 如 图 8-8 所 示 。 


边框 类 型 : <select class="monospaced"> 


<option value="solid” selected>——————</option> 

<option value="dashed">-------< </option> 

<option value="dotted">.......</option> 
</select> 


<div id="border" class="border"></diVv> 


图 8-8” 某 源 代码 展示 片段 
2. 等 宽 字体 与 图 形 呈 现 案 例 一 则 


假设 某 工 具有 这 人 么 一 个 功能 : 通过 下 拉 选 择 ， 可 以 改变 元 素 的 边 
框 样式 ， 也 就 是 borderSty1le 在 solLlid/dashed/Xdotted 间 切换 。 


大 家 都 知道 ， 原 生 的 <select> 的 <option> 元 素 的 innerHTML 
只 能 是 纯 text 字 符 ， 不 能 有 htm1， 也 不 支持 伪 元 素 ， 因 此 ， 要 模拟 
solid、dashed 和 dotted， 只 能 使 用 字符 ， 而 字符 有 长 有 短 ， 可 以 
模拟 成 像样 的 规整 的 图 形 吗 ? 


可 以 的 ， 试 试 使 用 等 宽 字 体 。 手 动 输入 http:/demo.cssworld.cn/8/2- 
1.php 或 者 扫 下 面 的 二 维 码 。 最 终 效 果 如 图 8-9 所 示 。 


边框 类 型 : ------- v 
FP 
bs ms i 


图 8-9 ”等 宽 字 体 模拟 边框 类 型 示意 
3. ch 单位 与 等 宽 字 体 布局 

ch 和 em、rem、ex 一 样 ， 是 CSS 中 和 字符 相关 的 相对 单位 。 和 ch 
相关 的 字符 是 0， 没 错 ， 就 是 阿拉 伯 数 字 0。1ch 表 示 一 个 0 字符 的 宽 
度 ， 所 以 6 个 0 所 占据 的 宽度 就 是 6ch。 


但 是 我 们 网 页 内 容 的 字符 不 可 能 都 是 ， 所 以 这 个 单位 乍 看 殉 显 
得 很 鸡肋 。 但 是 ， 如 采 和 等 宽 字 体 在 一 起 使 用 ， 它 残 可 以 发 挥 不 一 样 


的 威力 。 


由 于 ch 是 个 CSS3 单 位 ， 且 IE9 浏 览 器 的 宽度 和 其 他 浏览 右 明 显 不 
一 样 ， 因 此 此 处 不 展开 ,但 可 以 提 一 提 一 些 不 错 的 应 用 场景 。 例 如 ， 
有 些 输入 框 是 输入 手机 号 的 ， 在 中 国 ， 手 机 号 是 11 位 ， 因 此 我 们 可 以 
设置 该 输入 框 宽度 为 11ch， 同 时 让 字体 等 宽 ， 则 用 户 一 眼 就 能 看 出 自 
己 是 否 少 输入 或 者 多 输入 了 1 位 数字 。 双 如， 我 们 想 实 现 一 个 屏 人 幕 上 代 
码 一 个 一 个 出 现 的 动 效 ， 如 果 代 码 是 等 宽 字 体 ， 此 时 使 用 ch 单位 来 控 
制 宽度 ， 配 合 overflow 属 性 和 CSS animation 就 能 在 完全 不 使 用 
JavaScript 的 情况 下 将 此 效果 模拟 出 来 。 当然 ， 还 有 其 他 一 些 应 用 场 
景 ， 不 一 一 说 明 。 


8.2.3 ”中 文字 体 和 英文 名 称 


虽然 一 些 常见 中 文字 体 ， 如 宋体 、 微 软 雅 黑 等 ， 直 接 使 用 中 文 名 
称 作为 CSS font - family 的 属性 值 也 能 生效 ， 但 我 们 一 般 都 不 使 用 
中 文 名 称 ， 而 是 使 用 英文 名 称 ， 主 要 是 为 了 规避 乱码 的 风险 。 还 有 一 
些 中 文字 体 直接 使 用 中 文 名 称 作为 CSS font -family 的 属性 值 是 没 
有 效果 的 ， 如 思源 黑体 、 兰 亭 黑 体 等 ， 需 要 使 用 字体 对 应 的 英文 名 称 
才 可 以 生效 。 


总 而 言 之 一 句 话 ， 要 想 使 用 中 文字 体 ， 殊 必须 要 知道 其 对 应 的 英 
文 名 称 。 下 面 束 是 我 整理 的 一 些 常见 中 文字 体 对 应 的 font -family 
英文 属性 名 称 。 


(1) Windows 稼 见 内 置 中 文字 体 和 对 应 英文 名 称 见 图 8-10。 


字体 中 文 名 字体 英文 名 


宋体 SimSun 
黑体 SimHei 
微软 雅 黑 Microsoft Yahei 


微软 正 黑体 Microsoft JhengHei 


实体 KaiTi 
新 宋体 NSimSun 
仿宋 FangSong 


图 8-10 ”Windows 中 常见 内 置 中 文字 体 和 对 应 英文 名 称 


(2) OS X 系 统 内 置 中 文字 体 和 对 应 英文 名 称 见 图 8-11。 


字体 中 文 名 字体 英文 名 


苹 方 PingFang SC 
华文 黑体 STHeiti 
华文 档 体 STKaiti 


华文 宋体 STSong 


华文 仿宋 STFangsong 


华文 中 宋 STZhongsong 


华文 琥珀 THupo 


华文 新 魏 STXinwei 


华文 末 书 STLiti 


华文 行 精 STHinghae 


冬青 黑体 简 
兰亭 黑 - 简 
解 翩 体 - 漳 
手札 体 - 简 
宋体 - 简 
娃娃 体 - 障 
魏 碑 - 简 
行 褚 - 简 
雅 病 - 简 


圆 体 - 简 


Hiragino Sans GB 
Lantinghei SC 
fjanzrpen SC 
Hannotate SC 
Songti SC 

Wawati SC 

Weibei SC 

Nenghac SC 

Yapi SC 


Yuanti SC 


图 8-11 OS X 常 见 内 置 中 文字 体 和 对 应 英文 名 称 


(3) Office 软 件 安装 新 增 中 文字 体 和 对 应 英文 名 称 见 图 8-12。 


(4) 其 他 一 些 中 文字 体 和 对 应 英文 名 称 见 图 8-13 。 


华文 细 黑 


华文 楷体 


三 文 飞 书 
华文 行 模 
万 正解 体 


方正 姚 体 


字体 英文 名 
YouTYuan 
LiSu 
3TXihei 
3STISaiti 
STSong 
STFangsong 
STZhongsong 
Gyn 
STHvupo 
STXinwei 
STLit! 
ST7Hirghae 


FZShuTi 


FZYaoti 


图 8-12 ”Office 安 装 新 增 中 文字 体 和 对 应 英文 名 称 


字体 中 文 名 字体 英文 名 
思源 黑体 Source Han Sans CN 
思源 宋体 Source Han Serif SC 


文 果 驿 微米 黑 ”WenQuanYi Micro Hei 


图 8-13 ”其 他 一 些 中 文字 体 和 对 应 英文 名 称 
8.2.4 ”一些 补充 说 明 


微软 正 黑 体 是 一 款 全 面 文 持 ClearType 技 术 的 TrueType 无 衬 线 字 
体 ， 用 于 繁体 中 文系 统 。 相 对 应 地 ， 中 国 大 陆地 区 用 的 是 微软 雅 黑 。 
对 于 微软 雅 黑 和 微软 正 黑 ， 不 好 人 简单 地 用 人 简体 或 者 尝 体 来 区 分 ， 因 为 
这 两 套 字 体 都 同时 包含 了 比较 完整 的 简体 和 繁体 汉字 ， 以 确保 在 简体 
和 繁体 混 排 的 页 面 上 能 够 完美 地 显示 。 但 由 于 中 国 大 陆 和 中 国 港 、 
澳 、 台 地 区 在 各 目的 文字 规范 中 对 汉字 的 写法 规定 有 很 多 细节 上 的 不 
同 ， 所 以 这 两 套 字 形 在 正式 场合 是 不 能 混 靖 使 用 的 。 


我 们 平 第 所 说 的 “宋体 ”"， 指 的 部 是 “中 吻 宋 体 *"， 英 文 名 称 
SimSun, “黑体 "类似 的 是 “中 易 半 体 ”。 在 OS X 前 见 内 置 中 文字 体 中 我 
罗列 了 一 个 “宋体 - 稍 ”， 需 要 注意 的 是， 这 个 “宋体 - 简 ? 和 我 们 平角 所 说 
的 “宋体 "并 不 是 同一 个 字体 ， 其 英文 名 称 是 “Songti SC”， 字 形 表 现 也 
有 差异 ， 要 注意 疆 别 。 


在 OS X 也 残 是 平 果 操作 系统 的 字体 名 称 中 经 常会 出 现 *SC”， 这 
个 “SC” 指 的 是 “简体 ” (simplified chinese) 的 意思 ， 相 对 应 的 还 


有 “TC”， 指 的 是 “繁体 ”(traditional chinese) 的 意思 。 


Windows 系 统 本 身 默认 的 中 文字 体 并 不 多 ， 和 OS X 操 作 系 统 相 比 
逊色 很 多 ， 尤 其 是 OS X 操 作 系 统 中 的 “翩翩 体 ”手札 体 ” 等 几 个 手写 体 
就 非常 棒 ! 但 是 好 在 Windows 操 作 系 统 安装 Office 的 比例 相当 高 ， 因 此 
如 果 不 是 要 求 非常 严格 的 话 ， 我 们 还 是 可 以 使 用 很 多 中 文字 体 的 ， 

如 “华文 行 楷 *“ 华 文 新 魏 “ 华 文 隶 书 ” 等 华文 字体 。 其 中 ,， “华文 黑 

体 " 和 “华文 细 黑 ”有 一 段 故 事 ' OS X 10.6 版 本 之 前 ,，“ 华 文 黑体 ”由 “ 华 
文 细 黑 ”(STXihei) 和 “华文 黑体 ”(STHeiti) 这 两 个 字 重 组 成 ,但 OS 
X10.6 之 后 “华文 黑体 ”重组 ， 就 没有 “华文 细 黑 ”这 么 一 说 了 。 因 此 ， 我 
把 “华文 细 黑 * 归 在 了 Office 安 装 字体 一 类 ， 而 将 “华文 黑体 * 归 在 OS X 
之 中 。 根 据 我 的 测试 ， 这 两 个 字体 并 不 能 随意 互通 有 无 ， 而 且 似 乎 还 
与 浏览 故 有 关系 : OS X 系 统 下 ， 似 乎 Safari 能 够 癌 下 兼容 “华文 细 畦 ”， 
Chrome 却 不 可 以 ; 反 过 来 ，Windows 系 统 下 ， 无 法 识别 “华文 黑 

体 ”(STHeiti) 。 又 或 者 是 使 用 “ 圆 体 ”，Windows 系 统 下 有 个 “ 幼 圆 ”， 
OS X 下 有 个 “ 圆 体 -和 测 ”， 都 是 统一 风格 的 字体 ， 也 是 可 以 在 实际 项 目 中 
尝试 使 用 的 。 


所 有 英文 名 称 大 小 写 都 经 过 一 定 的 考量 ， 并 不 是 随便 设 定 的 ， 唱 
然 说 CSS font-family 对 名 称 的 大 小 写 不 怎么 敏感 ， 但 是 根据 我 的 
经 验 ， 最 好 至 少 首 字母 要 大 写 ， 否 则 在 使 用 CSS unicode-range 的 
时 候 可 能 会 遇 到 一 些 麻 烦 。 


“思源 黑体 "和 “思源 宋体 ”是 Adobe 与 Google 合 作 推 出 的 开源 字体 。 
其 设计 目标 是 可 以 广泛 用 于 多 种 用 途 的 计算 机 字体 ， 比 如 用 于 手机 、 
平板 或 者 桌面 的 用 户 界 面 、 网 页 浏览 或 者 电子 书 阅读 等 ， 均 包含 7 个 字 


重 。 因 为 思源 黑体 和 思源 宋体 字体 集成 到 Google 的 汉 Unicode 字 体系 列 
( 称 为 Noto) 中 ， 所 以 不 少 网 站 及 资料 会 显示 “思源 黑体 ”英文 名 称 
是 “Noto Sans CJK SC”， 这 是 Google 的 称呼 。 然 而 ， 根 据 我 的 测试 ， 这 
种 英文 名 称 在 Windows 和 OS X 系 统 下 都 是 无 效 的 ，Adobe 的 名 

称 “Source Han Sans CN” 可 以 正常 显示 。 


“ 文 泉 驿 微米 黑 ? 是 Google Droid 的 开源 衍生 字体 。Droid 字 体系 是 
Google 包 含 在 著名 的 开源 手机 平台 Android 系 统 中 的 默认 字体 ， 其 中 的 
Droid Sans Fallback 包 含 CJK 标 准 汉字 16000 余 个 ， 是 目前 所 知 为 数 不 多 
的 开源 中 文字 体 之 一 〈 也 是 继 文 录 驿 正 黑 之 后 第 二 个 开源 中 文 黑 
体 ) 。 由 于 该 字体 的 设计 目标 是 手机 等 仍 入 式 设 备 ， 与 其 他 常见 中 文 
字体 比较 ， 其 一 个 显著 的 优点 是 文件 极为 精简 ， 只 有 不 到 3 MB 。 


本 市 目 前 所 展示 的 或 是 系统 字体 ， 或 是 开源 字体 ， 如 果 希 望 知道 
一 些 需 要 付费 购买 的 版 权 字 体 的 英文 名 称 ， 如 某 些 汉 仪 字体 或 者 方正 
字体 ， 可 以 参见 我 的 博客 文章 : http:/www.zhangxinxu.com/ 
Wordpress/?p=5474。 


8.3 ”字体 家 族 其 他 成 员 
8.3.1 貌似 粗 六 、 实 则 精细 无 比 的 font -weight 


font-weight 表 示 “ 字 重 *， 通 俗 点 讲 ， 就 是 表示 文字 的 粗细 程 
度 。 


对 于 font -weight 这 个 属性 ， 我 们 平时 使 用 都 相当 粗 狐 ， 无 非 
就 是 下 面 这 两 个 CSS 声 明 : 


font-weight: normal; 
font-weight: bold; 


以 至 于 很 多 人 就 误 认 为 font -weight 的 作用 就 是 让 文字 加 粗 或 
者 正常 ， 但 实际 上 ，font- weight 这 个 属性 可 谓 “ 张 飞 罕 针 ”— 粗 
中 有 细 ， 而 且 是 精细 无 比 ! 


首先 让 我 们 大 致 了 解 一 下 font -weight 都 支持 哪些 属性 值 。 具 
体 如 下 : 


/* 平常 用 的 最 多 的 */ 
font-weight: normal; 
font-weight: bold; 


/* 相对 于 父 级 元 素 */ 
font-weight: lighter; 
font-weight: bolder; 


/* 字 重 的 精细 控制 */ 
-weight: 100; 
-weight: 200; 
-weight: 300; 
-weight: 400; 
-weight: 500; 
-weight: 600; 
-weight: 700; 
-weight: 800; 
-weight: 900; 


可 以 看 到 ，font -weight 文 持 十 多 个 属性 值 ，normal 和 bold 
这 两 个 关键 字 仅仅 是 众多 属性 值 的 冰山 一 角 。 


所 有 这 些 属性 值 ， 都 可 以 从 font-weight:100 至 font - 
weight:900 说 起 。 


。100: 文字 很 细 ， 细 如 发 丝 。 


。 200: 文字 很 轻 ， 轻 如 鸿毛 。 

。 300: 文字 较 轻 ， 轻 如 飞 燕 。 

。 400: 文字 正常 ， 等 同 normal 。 
。 500: 文字 不 粗 不 细 ， 不 轻 不 重 。 
。 600: 文字 略 粗 ， 粗 如 小 腿 。 

。 700: 文字 加 粗 ， 等 同 bo1d 。 

。 800: 文字 超 粗 ， 粗 如 大 腿 。 

。 900: 文字 很 重 ， 重 如 泰山 。 


有 人 可 能 会 有 疑问 : 我 是 不 是 可 以 目 创 一 个 font -weight :550 
的 写法 ? 答案 是 : 不 可 以 。 如 果 使 用 数值 作为 font-weight 属 性 
值 ， 必 须 是 100~900 的 整 百 数 。 因 为 这 里 的 数值 仅仅 是 外 表 长 得 像 
数值 ， 实 际 上 是 一 个 具有 特定 含义 的 关键 字 ， 并 且 这 里 的 数值 关键 字 
和 字母 天 键 字 之 间 是 有 对 应 关系 的 ， 例 如 ，font -weight :400 实 际 
上 等 同 于 font -weight: normal，font-weight:700 等 同 于 
font-weight:bold。 因 此 ， 如 果 我 们 希望 让 某 些 文字 的 粗细 变 得 
正常 ， 也 可 以 使 用 font-weight:400,， 与 使 用 normal 相 比 少 了 3 个 
字母 同样， 如 果 和 希望 文字 加 粗 ， 也 可 以 使 用 font-weight:700， 
与 使 用 bo1d 相 比 少 了 1 个 字母 。 


因此 ， 很 显然 ，400 和 706 是 文字 粗细 与 否 的 重要 临界 点 ， 加 上 
最 小 的 100 和 最 大 的 9090， 束 构成 了 font -weight 完 整 的 字 重 临 界 
点 。 知 道 这 个 有 什么 意义 呢 ? 意义 束 在 于 ，1lighter 和 bolder 这 两 
个 具有 相对 特定 的 关键 字 就 是 基于 这 4 个 临界 点 进行 解析 和 泻 染 的 。 


这 里 有 必要 再 强调 一 下 ，1ighter 和 bolder 是 基于 临界 点 进行 
解析 的 ， 千 万 不 要 想当然 地 认为 是 根据 当前 字 重 上 下 100 加 加 减 减 后 
的 效果 。 例 如 ， 先 font-weight:100， 然 后 再 font- 
weight:bolder 后 的 font -weight 计 算 大 小 是 40600， 而 不 是 100。 
完整 解析 关系 参见 表 8-1 。 


表 8-1 1ighter 和 bolder 解 析 规 则 表 


400 100 


900 900 700 


下 面 关 键 问题 来 了 。 很 多 人 会 发 现 ，font -weight 无 论 是 设置 
300、400、500 还 是 6960， 文 字 的 粗细 都 没有 任何 变化 ， 只 有 到 700 
的 时 候 才 会 加 粗 一 下 ， 感 觉 浏 览 器 好 像 不 文 持 这 些 数值 ， 那 么 搞 这 人 么 
多 档 位 不 就 是 多 余 的 吗 ? 


实际 上 ， 所 有 这 些 数 值 关 键 字 浏 览 右 都 是 文 持 的 ， 之 所 以 没有 看 
到 任何 粗细 的 变化 ， 是 因为 我 们 的 系统 里 面 缺 乏 对 应 粗细 的 字体 。 苞 
其 我 们 做 介面 剖 项 目 时 ， 大 部 分 用 户 都 是 使 用 Windows 系 统 ， 而 
Windows 系 统 中 的 中 文字 体 粗 细 束 一 个 型 号 ， 如 “宋体 ”"， 或 者 说 “微软 
雅 黑 ?"， 因 此 ， 最 终 的 效果 就 是 CSS 层 面 的 “加 粗 * 和 “正常 尺寸 "两 种 表 
现 。 


假如 我 们 的 操作 系统 安装 了 该 字体 家 族 全 部 的 字 重 字体 ， 则 设置 
300、400、500 时 ， 彼 此 之 间 残 能 看 出 明显 的 变化 了 。 例 如 ，OS X 系 
统 中 的 “于 方 ”， 又 如 我 这 里 即将 要 演示 的 “思源 黑体 ”。“ 思 源 黑体 ”是 
一 款 免费 的 开源 字体 ， 我 自己 电脑 上 的 版 本 有 7 个 字 重 ， 如 网 8-14 所 


小 ° 


| SourceHanSansCN-Bold.otf 

| SourceHanSansCN-ExtralLight.otf 
SourceHanSansCN-Heavy.otf 

| SourceHanSansCN-Light.otf 
,SourceHanSansCN-Medium.otf 

» SourceHanSansCN-Normal.otf 


| SourceHanSansCN-Regular.otf 


图 8-14 “思源 黑体 ”7 个 不 同 字 重 的 字体 


此 时 ， 应 用 如 下 HTML 和 CSS 代 码 : 


<p class="f100"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f200"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f300"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f400"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f500"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f600"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f700"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f800"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f900"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
p { font-family: 'Source Han Sans CN'; } 
.f100 { font-weight: 100; 
.f200 { font-weight: 200; 
.f300 { font-weight: 300; 
.f400 { font-weight: 400; 
,f500 { font-weight: 500; 
.fe600 { font-weight: 600; 
{ 
{ 
{ 


.f700 font-weight: 700; 
.f800 font-weight: 800 ; 
.fF900 font-weight: 900; 


OO 


结果 可 以 看 到 明显 的 字 重 变化 ， 而 不 是 单纯 的 加 粗 和 正常 两 种 形态 ， 
如 图 8-15 所 示 。 


轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 


图 8-15 “思源 黑体 ”在 CSS 不 同 font -weight 值 下 的 效果 


也 就 是 说 ，font -weight 要 想 真 正 发 挥 潜力 ， 问 题 不 在 于 CSS 的 
文 择 ， 而 在 于 是 否 存在 对 应 的 字体 文件 。 如 采 没 有 对 应 的 字体 文件 ， 
我 又 想 有 多 档 字 重 效 果 ， 该 怎么 办 呢 ? 可 以 试 试 去 8.5- 看 看 能 不 能 找 


到 答案 。 


8.3.2 ”具有 近似 姐妹 花 属性 值 的 font -style 


font-style 表 示 文 字 造 型 是 斜 还 是 正 ， 与 font -weight 相 
比 ， 其 属性 值 就 要 少 很 多 ， 如 下 : 


font-style: normal; 
font-style: italic; 


font-style: oblique; 


其 中 ，italic 和 ob1ique 这 两 个 关键 字 都 表示 “斜体 ”的 意思 ， 可 以 
说 是 一 对 姐妹 花 属性 。 但 就 好 比 双胞胎 一 样 ， 就 算 长 得 再 像 也 会 有 差 
别 ， 那 么 italic 和 ob1ique 这 两 个 关键 字 的 差别 在 哪里 呢 ? 


差别 在 于 italic 是 使 用 当前 字体 的 斜体 字体 ， 而 oblique 只 
是 单纯 地 让 文字 倾斜 。 如 果 当 前 字体 没有 对 应 的 斜体 字体 ， 则 退 而 求 
其 次 ， 解 析 为 ob1ique， 也 就 是 单纯 形状 倾斜 。 


我 们 平常 在 Web 上 使 用 比较 多 的 中 文字 体 ， 如 “宋体 ”微软 雅 
黑 ” 等 ， 是 没有 专门 的 倾斜 字体 的 ， 因 此 ， 从 最 终 表 现 上 来 看 font - 
style:italic 和 font-style:oblique 是 没有 区 别 的 。 但 是 ， 对 
于 一 些 英 文字 体 ， 如 “Georgia”， 人 情况 就 不 一 样 了 ， 因 为 “Georgia” 有 一 
个 专门 设计 的 斜体 字体 文件 。 我 们 不 妨 简单 测试 一 下 ，HIML 和 CSS 
代码 如 下 : 


<p class="i">Georgia italic</p> 
<p class="0o">Georgia oblique</p> 
<p>Georgia normal</p> 


p { font-size: 50px; font-family: Georgia; } 
.i { font-style: italic; } 
.0 { font-style: oblique; } 


结果 可 以 看 出 ， 两 个 “倾斜 "有 着 明显 的 不 同 ， 例 如 非常 明显 的 字母 g， 
属性 值 为 talic 时 长 得 像 鱼 钧 ， 而 为 0oblique 时 长 得 像 糖 硝 户 ， 如 
图 8-16 所 示 。 


Georgia italic 
Georg1a oblique 
Georgla normal 


图 8-16 “Georgia” 字 体 不 同 的 “倾斜 ”效果 


之 所 以 会 专门 为 一 个 字体 设计 倾斜 字体 ， 就 是 因为 单纯 倾斜 的 时 
候 不 好 看 ， 比 方 说 上 面 的 “Georgia” 字 体 ， 当 字号 比较 小 同时 文字 倾斜 
的 时 候 ， 字 符 会 挤 作 一 团 ， 下 b 密 不 规则 ， 可 读 性 比较 糟糕 。 相 比 之 
下 ， 专 门 设计 的 “Georgia” 斜 体 阅读 体验 就 要 好 很 多 。 再 加 上 没有 和 斜体 
字体 时 italic 表 现 会 和 ob1ique 一 致 ， 因 此 ， 我 们 在 实际 开发 的 时 
候 ， 几 乎 没有 任何 理由 需要 使 用 font -style:ob1ique。 


8.3.3 ”不 适合 国情 的 font -variant 


font-variant 是 一 个 从 IE6 时 代 束 过 来 的 CSS 属 性 ， 对 于 我 们 大 
中 华 用 户 ， 其 文 持 的 属性 值 和 作用 让 我 们 这 些 汉字 用 户 觉得 有 些 头 
疼 ， 实 现 小 体型 大 写字 母 ， 两 个 属性 值 要 么 normal， 要 么 Smal1- 
caps，font-variant:smal1-caps 就 是 可 以 让 英文 字符 表现 为 小 
体型 大 写字 母 。 


代码 示意 如 下 : 


http://www.<span style="font-variant:small-caps">css- 


world.com</span>/ 


结 采 如 下 : 


http://WWWw.css-WoRLD.coM)/ 


也 束 是 大 小 跟 小 写 了 字母 一 样 ， 但 样式 是 大 写 ， 我 想 在 母语 十 英文 的 国 
家 这 个 属性 估计 都 用 得 不 多 ， 所 以 ， 大 家 简单 了 解 一 下 束 可 以 了 。 


8.4 font 属 性 


8.4.1 ”作为 缩写 的 font 属 性 


如 果 在 一 段 CSS 代 码 中 发 现 了 font 属 性 ， 八 九 不 离 十 就 是 利用 
font 属 性 进行 文本 相关 样式 的 缩写 。 可 以 缩写 在 font 属 性 中 的 属性 
非常 多 ， 包 括 font -style、font-variant、font-weight、 


font-size、1lLine-height、font-family 等 。 完 整 语法 为 : 


[ [ font-style || font-variant || font-weight ]? font-size [ / 
line-height ]? 


font-family ] 


| | 表示 或 ，? 和 正则 表达 式 中 的 ?的 含义 一 致 ， 表 示 0 个 或 1 个 。 仔 
细 观 察 上 面 的 语法 ， 会 发 现 font-size 和 font-family 后 面 没有 问 
号 ， 也 就 是 说 是 必需 的 ， 是 不 可 以 省 略 的 。 这 和 background 属 性 不 
一 样 ，background 属 性 虽然 也 支持 缩写 ,但 是 并 没有 需要 两 个 属性 
值 同 时 存在 的 限制 。 


因此 ， 如 果 你 的 font 属 性 缩写 无 效 ， 检 查 一 下 font-size 和 
font-family 这 两 个 属性 是 否 同 时 存在 。 例 如 ， 下 面 CSS 语 句 看 上 去 
写 了 很 多 属性 ， 实 际 却 是 无 效 的 ， 因 为 缺 字体 : 


而 下 面 这 个 反而 是 有 效 的 : 


.font { font: 14px '©'; } 


需要 注意 的 是 ，font 缩 写 会 破坏 部 分 属性 的 继承 性 。 举 个 简单 的 
例子 ,假设 你 的 页 面 行 高 是 29px， 当 你 使 用 了 下 面 的 CSS 后 : 


.font { font: 400 30px 'Microsoft Yahei'; } 


.font 元 素 的 行 品 line-height 属 性 值 束 被 重 置 为 了 normal， 而 不 
同 浏览 器 上 line- height:normal 是 不 一 样 的 ， 因 此 ， 在 使 用 
font 缩 写 的 时 候 ， 如 果 不 设 定 行 高 值 ， 一 定 会 出 现 不 兼容 的 问题 。 换 
句 话 说， 如 采 你 的 CSS 代 码 原本 就 没有 Line-height 属 性 ， 使 用 
font 缩 写 反 而 是 不 推荐 的 。 


另外 ， 还 有 一 个 令 人 很 头疼 的 问题 ， 就 是 font 缩 写 必 须要 带 上 
font -family， 然 而 ， 原 本 真实 继承 的 font - family 属性 值 可 能 会 
很 长 ， 每 次 font 缩 写 后 面 都 挂 一 个 长 长 的 字体 列表 ， 令 人 很 是 不 怖 ， 
有 什么 小 技巧 可 以 避免 吗 ? 


这 里 有 两 个 方法 。 


方法 一 : 我 们 可 以 随便 找 一 个 系统 根本 不 存在 的 字体 名 占 位 ， 如 
字母 a， 或 者 特殊 一 点 ， 用 笑脸 表情 e， 然 后 再 设置 font - 
family:inherit 来 重 置 这 个 占 位 字体 。 例 如 ， 我 们 想 把 字号 和 行 高 
合并 缩写 ， 就 可 以 这 样 ; 


.font { 
font: 30px/30px '®'; 


font-family: inherit; 


是 不 是 有 点 拆 东 墙 补 西 墙 的 感觉 ? 这 么 做 主要 是 因为 font 缩 写 不 
能 使 用 inherit 等 全 局 关键 字 。 


方法 二 : 利用 @font face 规 则 将 我 们 的 字体 列表 重 定 义 为 一 个 
字体 ， 这 是 兼容 性 很 好 、 效 益 很 高 的 一 种 解决 方法 ， 会 在 8.5 廊 详细 介 
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8.4.2 ”使 用 关键 字 值 的 font 属 性 


font 属 性 除了 缩写 用 法 ， 还 文 持 关 键 字 属性 值 ， 这 个 人 是 很 多 人 
都 不 知道 的 。 其 语法 如 下 : 


font:caption | icon | menu | message-box | small-caption | status- 
bar 


如 有 果 将 font 属 性 设置 为 上 面 的 一 个 值 ， 束 等 同 于 设置 font 为 操 
作 系 统 该 部 件 对 应 的 font ， 也 就 是 说 直接 使 用 系统 字体 。 


根据 W3C 官 方 维基 的 解释 ， 以 及 我 目 己 在 Windows 系 统 下 的 测 
试 ， 各 个 关键 字 的 含义 如 下 。 


caption: 活动 窗口 标题 栏 使 用 的 字体 。 

icon: 包含 图 标 内 容 所 使 用 的 字体 ， 如 所 有 文件 夹 名 称 、 文 件 名 
称 、 磁 盘 名 称 ， 甚 至 浏览 器 窗口 标题 所 使 用 的 字体 。 

menu: 菜单 使 用 的 字体 ， 如 文件 夹 茉 单 。 

message-box: 消息 盒 里 面 使 用 的 字体 。 

small-caption: 调 色 板 标 题 所 使 用 的 字体 。 

status-bar: 窗 体 状态 栏 使 用 的 字体 。 


使 用 示例 : 


.Menu { font: menu; } 


需要 注意 的 是 ， 使 用 关键 字 作为 属性 值 的 时 候 必 须 是 独立 的 ， 不 
能 添加 font -fami1ly 或 者 font-size 之 类 的 ， 这 和 font 属 性 缩写 不 
是 一 个 路 子 。 如 果 混 用 ， 例 如 ; 


,menu { font: 14px menu; } 


则 此 时 的 menu 是 作为 自 定义 的 字体 名 称 存在 的 ， 而 不 是 表示 系统 的 
menu 荣 单字 体 。 


实际 上 ，font 关 键 字 属性 值 本 质 上 也 是 一 种 缩写 ， 里 面 已 经 包含 
了 诸如 font -size 等 信息 ， 如 图 8-17 一 图 8-19 所 示 。 


使 用 的 系统 字体 天 键 字 是 : caption 

使 用 的 系统 字体 关键 字 是 ，icon 

使 放 的 系统 字 估 关 馆 字 是 : menu 

使 用 的 系统 字体 天 键 字 是 message-box 
使 用 的 系统 字 估 关 馆 字 是 : small-caption 

使 用 的 系统 字 估 关 负 字 


旦 ; status-bar 


图 8-17 ”Windows 7 Chrome 下 font 关 键 字 属性 值 效 果 


使 用 的 系统 字体 关 馆 字 是 : caption 

使 用 的 系统 字体 关键 字 星 : icon 

使 用 的 系统 字体 关键 字 是 : menu 

使 用 的 系统 字体 关键 字 旺 : message-box 
使 用 的 系统 字体 关键 字 是 : small-caption 
使 用 的 系统 字体 关键 字 是 : status-bar 


图 8-18 Windows 7 IE 浏 览 器 font 关 键 字 属性 值 效果 


这 3 张 图 透露 出 不 少 重要 的 信息 。 从 Windows 下 Chrome 和 IE 浏 哆 器 
部 分 关键 字 的 字体 和 字号 表现 不 一 样 可 以 看 出 ， 同 一 系统 下 浏览 硕 的 
表现 是 有 差异 的 。 就 这 么 一 说 ， 好 像 也 没什么 ， 但 是 如 果 我 们 深入 思 
考 ， 就 会 发 现 这 背后 是 有 问题 的 :既然 font 关 键 字 属 性 值 的 样式 表现 
是 跟着 系统 走 的 ， 那 为 何 同一 系统 下 不 同 浏览 右 的 表现 会 不 一 样 呢 ? 
显然 是 某 个 浏 贤 器 出 现 了 问题 。 后 来 ， 通 过 设置 修改 Windows 系 统 相 
天 控件 的 默认 字体 我 发 现 ， 这 次 是 Chrome 浏 览 器 拖 了 后 腿 。 
caption、icon、message-box 这 3 个 关键 字 在 Windows 系 统 下 的 
Chrome 浏 哆 器 中 似乎 是 无 效 的 ， 并 不 会 实时 跟着 系统 字体 走 ， 也 就 十 
说 ， 就 算 手 动 修改 了 操作 系统 的 字体 ， 这 3 个 天 键 字 还 是 显示 浏览 絮 默 
认 的 宋体 ， 束 算 浏 唤 器 重启、 浏览 器 升级 外 加 系统 重 局 也 没有 用 ; 而 
且 ，menu 这 个 关键 字 表示 的 并 不 是 “菜单 "， 而 是 “ 调 色 板 标 
题 *small-caption。 而 所 有 这 些 问 题 在 Firefox 和 IE 浏 览 器 中 一 个 都 
没有 ， 表 现 非常 一 致 ， 非 常 符合 预期 ， 例 如 ， 修 改 “ 图 标 ” 字 体 为 “思源 
黑体 "， 如 图 8-20 所 示 ， 则 所 有 文件 名 称 全 部 变 成 了 “思源 黑体 ”， 同 时 
font :icon 所 在 元 素 font -family 计 算 值 也 成 了 “思源 黑体 "， 如 图 
8-21 所 示 。 


使 用 的 系统 字体 关键 字 是 : caption font-size:13px; 

使 用 的 系统 字体 关键 字 是 : icon font-size:13px; 

使 用 的 系统 字体 关键 字 是 : menu font-size:13px; 

使 用 的 系统 字体 关键 字 是 : message-box font-size:13px; 
使 用 的 系统 字体 关键 字 是 : small-caption font-size:12px; 


使 用 的 系统 字体 关键 字 是 : status-bar font-size:12px; 


图 8-19 ”OS X Chrome 下 font 关 键 字 属 性 值 效果 


项 目 们 ): 大小 (加 ): 


图 标 加 | 32E 
字体 (P): 六 小 (E): 
| 思源 畦 体 CN Normal -| | 24 -| 


图 8-20 ”设置 系统 “图 标 项 目 ” 字 体 为 "思源 黑体 ” 


使 用 的 系统 字体 关键 字 星 : icon font-size:12px font-family: 导 源 私 体 CN Norma 


图 8-21 font : icon 表现 为 “思源 黑体 ” 


考虑 到 Chrome 浏 贤 右 的 市 场 占有 率 ， 我 们 在 使 用 font 属 性 的 时 
候 ， 要 避 开 caption、icon 和 message-box 这 3 个 关键 字 。 


对 于 不 同 的 操作 系统 ， 字 体 表 现 不 一 样 ， 这 是 预料 之 中 的 ， 毕 竟 
使 用 系统 字体 ， 而 不 同系 统 默认 字体 肯定 是 不 一 样 的 ， 然 后 字体 大 小 
也 不 一 样 。 例 如 ， 在 Windows 下 Chrome 的 caption 字 体 大 小 16px， 
而 在 OS X 下 却 只 有 13px。 因 此 ， 在 实际 使 用 时 ， 我 们 还 需要 在 一 下 
面 再 设 定 一 人 font- size 大 小 来 保证 一 致 性 。 照 理 讲 ， 直 接 这 样 设置 
殴 可 以 了 : 


html] { 
font: menu; 


font-size: 16px; 


但 是 ， 实 际 上 ，IE8 浏 贤 絮 会 莫名其妙 地 名 上 略 这 里 的 font - 
size:16px， 因 此 ， 一 般 都 是 下 面 这 样 处 理 : 


html { font: menu; } 
body { font-size: 16px; } 


除了 caption、icon、menu、message-box、small- 
caption 和 status-bar， 还 有 很 多 其 他 非 标准 的 关键 字 ， 如 
button、 checkbox 、 checkbox-group、 combo-box、 
desktop 、 dialog、 document 、field、 hyperlink、1ist- 
menu 、 menu-item、 menubar 、outline-tree、password、 
pop-up-menu 、 pull-down-menu、push-button、radio- 
button、 radio-group 、 range、signature、tab、 
tooltip、window 和 workspace。 不 过 ， 这 些 关 键 字 浏览 器 大 多 不 
文 持 ， 尺 管 Firefox 浏 览 絮 支持 一 部 分 ， 但 古 需 要 添加 私有 前 绥 - 
moz-。 例 如 : 


font: -moz-button; 


因此 ， 它 们 的 实际 应 用 价值 不 大 。 男 外 ，WebKit 浏 览 絮 还 支持 其 他 关 
键 字 ， 如 font: -webkit- control， 如 图 8-22 所 示 。 


-webkit-body 


zoom: 
} -webkit-control 
bodv, .di-webkit-mini-control 
colorj-webkit-pictograph 
} -webkit-small-control 
body { |-webkit-xxx-large 


font: | -webkit-body 
地 -wehk 1 P= He . antiali 


图 8-22 ” ”WebKit 支持 的 font 关 键 字 属性 值 


这 些 私 有 关键 字 的 价值 仅 限 于 了 解 。 
8.4.3 “font 关键 字 属 性 值 的 应 用 价值 


说 了 这 么 多 ，font 关 键 字 属性 值 的 价值 如 何 呢 ? 有 没有 合适 的 使 
用 场景 呢 ? 有， 并 且 相 当 适 合 ! 


目前 ， 非 常 多 网 站 的 通用 font -family 直 接 就 是 : 
html { font-family: "Microsoft YaHei'; } 


知道 问题 在 哪里 吗 ? 这 样 一 设置 ， 束 意味 着 所 有 操作 系统 下 的 所 
有 浏 咒 右 部 要 使 用 “微软 雅 黑 ”字体 。 假 如 说 用 户 的 1Mac 或 者 macbook 
因为 茶 些 原因 安装 了 “微软 雅 黑 ?字体 ， 那 已 不 是 这 些 系统 原本 更 加 床 
腕 的 中 文字 体 束 不 能 使 用 了 ? 


于 是 ， 人 们 束 会 有 这 样 的 需求 : 希望 非 Windows 系 统 下 不 要 使 


一 种 方法 是 可 以 试 试 使 用 非 标 准 的 -apple-system 等 天 键 字 字 
体 ， 具 体 方法 如 下 : 


html { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft 


这 能 够 一 定 程 度 上 满足 我 们 的 需求 ， 但 古 毕 葛 是 非 标准 的 属性 
值 ， 说 不 定 哪 天 束 被 浏览 器 舍弃 了 ， 因 此 大 非 过 不得已， 还 古 少 用 为 


顺便 多 说 两 句 ， 实 际 上 还 真有 标准 的 系统 字体 关键 字 ， 叫 作 
system-ui， 使 用 示例 如 下 : 


html { font-family: system-ui; } 


在 我 写 这 段 内 容 的 时 候 ， 仅 Chrome 浏 览 器 支持 它 (从 版 本 56 开 
始 ) ， 并 且 ， 根 据 我 的 在 Windows 电 脑 上 的 测试 ，Chrome 浏 览 器 的 
system-ui 指 的 承 是 “ 调 色 板 标 题 ? 对 应 关键 字 smal1-caption 使 用 
的 字体 ， 有 点 儿 出 乎 我 的 意料 。 


压轴 的 总 在 最 后 ， 显 然 还 有 个 更 好 的 方法 束 是 使 用 这 里 的 font 头 
键 字 ， 这 是 标准 属性 ，10 年 前 浏 贤人 种 束 文 持 了 ， 可 以 放心 使 用 。CSS 
代码 如 下 (三 选 一 即 可 ) : 

font: menu; 
font-size: 16px; } 


font: small-caption; } 


font-size: 16px; } 


font: status-bar; } 
font-size: 16px; } 


没有 洋洋 洒洒 的 字体 列表 ， 人 简 简 单单 的 儿 个 声明 咕 可 以 让 各 个 系 
统 使 用 各 目 引 以 为 傲 的 字体 。 有 人 说 “我 有 选择 您 惯 症 ， 不 知 该 使 用 哪 
一 个 "， 那 哆 选 最 短 最 好 记 的 那个 : 


html { font: menu; } 
body { font-size: 16px; } 


最 后 ， 我 要 对 font 关 键 字 属性 值 的 用 法 做 一 个 点 评 。 


让 网 页 的 字体 跟 系 统 走 ， 对 设计 师 而 言 ， 其 实 是 一 个 比较 冒险 的 
做 法 ， 因 为 最 终 呈 现 的 字体 是 不 可 控 的 。 举 个 例子 ， 某 女生 非常 喜欢 
可 爱 风 格 ， 于 是 就 把 她 的 电脑 主题 变 成 了 非常 可 爱 的 风格 ， 亲 单 栏 的 
字体 全 部 变 成 那 种 很 可 爱 的 字体 ， 此 时 ，font :menu 所 呈现 的 就 不 
是 “微软 雅 遇 ?>， 而 是 这 个 用 户 定 义 的 “可 爱 字 体 *"， 这 可 能 不 是 设计 师 


想 看 到 的 ， 因 为 往往 会 跟 目 己 的 网 页 设计 风格 不 一 致 。 但 是 ， 转 念 一 
想 ， 万 一 这 是 用 户 想 看 到 的 呢 ? 既然 用 户 把 目 己 的 主题 设 为 该 字体 ， 

那 束 说 明 这 个 用 户 对 这 个 字体 并 不 排 不 ， 而 是 喜欢 。 当 她 浏览 网 页 的 
时 候 ， 发 现 殊 你 的 网 站 呈现 出 了 她 喜欢 的 那 种 子 体 ， 你 说 会 不 会 给 用 
户 一 种 * 你 懂 我 的 心 ” 的 感觉 呢 ? 对 用 户 而 言 ， 反 而 成 了 一 种 情感 化 的 


设计 | 


另外 ， 让 网 页 的 字体 跟 系 统 走 ， 还 有 一 个 更 加 长 远 的 好 处 。 随 着 
软件 的 不 断 发 展 ， 我 们 的 操作 系统 的 默认 中 文字 体 一 定 是 越 来 越 好 
看 ， 如 有 果 网 页 的 font -family 定 死 为 某 个 字体 ， 用 户 就 无 法 及 时 享 
受到 新 系统 新 字体 带 来 的 愉悦 的 视觉 感受 。 举 个 例子 ，OS X 的 默认 中 
文字 体 其 实 已 经 变 过 好 多 次 了 ， 例 如 ， 你 今天 写 了 个 页 面 ， 字体 设置 
为 很 潮 的 “ 苹 方 "”， 过 两 年 说 不 定 会 出 来 更 好 的 名 叫 “ 梨 方 * 的 字体 ， 我 
打包 票 ， 网 站 绝对 是 不 会 跟 进 的 ， 因 为 大 多 数 的 线 上 项 目 维护 都 不 会 
管 font -family 这 种 边 边 角 角 的 事情 ， 因 此 ， 就 算 很 多 年 过 去 了 ， 
网 站 使 用 的 依然 是 老 字 体 。 但 是 ， 如 果 使 用 的 是 font 关 键 字 属性 值 ， 
就 完全 不 会 有 这 样 的 问题 ， 网 站 字体 能 时 时 刻 刻 与 时 俱 进 。 


8.5 ”真正 了 解 @font face 规 则 


很 多 人 只 要 一 提 到 @font face 规 则 ， 心 中 就 会 不 由 自主 “ 哦 ”地 
一 声 : “这 个 我 知道 ， 可 以 用 来 生成 自 定义 字符 小 图 标 ! * 话 是 没 错 ， 
问题 在 于 很 多 人 以 为 生成 字符 小 图 标 瓯 是 Qfont face 规 则 的 全 部 ， 
实际 上 这 只 是 其 功能 之 一 ,一 旦 真正 了 解 @font face 规 则 ， 你 会 发 
现 ，@font face 规 则 可 以 做 的 事情 其 实 非 常 多 。 


8.5.1 Ofont face 的 本 质 是 变量 


虽然 说 CSS3 新 世界 中 才 出 现 真正 意义 上 的 变量 var， 但 实际 上 ， 
在 CSS 世 界 中 已 经 出 现 了 本 质 上 就 是 变量 的 东西 ，@font face 规 则 
就 是 其 中 之 一 。@font face 本 质 上 就 是 一 个 定义 字体 或 字体 集 的 变 
量 ， 这 个 变量 不 仅仅 是 简单 地 自 定义 字体 ， 还 包括 字体 重 命名 、 默 认 
字体 样式 设置 等 。 


@font face 规 则 支持 的 CSS 属 性 有 font-family、src、 
font-style、 font-weigh 、 unicode-range 、 font- 


variant、font-stretch 和 font-feature-settings。 例如: 


@font-face { 
font-family: 'example'; 
src: url(example.ttf); 
font-style: normal; 
font-weight: normal; 


unicode-range: U+0025-00FF; 
font-variant: small-caps; 
font-stretch: expanded; 
font-feature-settings: "ligai" on; 


属性 还 是 挺 多 的 ， 而 且 有 些 属 性 估计 是 他 认识 你 ， 你 不 认识 他 。 
但 是 从 实用 角度 来 讲 ， 有 些 属性 其 实 可 以 不 用 去 深究 ， 比 如 font- 
variant、font-stretch 和 font-feature- settings 这 3 个 属 
性 。 为 什么 呢 ? 因 为 按照 我 的 经 验 ， 这 3 个 属性 给 我 感觉 更 像 是 专 为 瑞 
文 设计 的 ， 所 以 如 果 不 是 有 业务 需要 ， 可 以 先 放 一 放 。 再 加 上 后 两 个 
是 CSS3 新 属性 ， 本 书 就 不 做 进一步 介绍 了 。 


好 ， 现 在 ， 是 不 是 感觉 讨 力 一 下 子 小 了 很 多 ? 我 们 需要 在 意 的 可 
以 目 定 义 的 属性 惑 只 剩 下 下 面 这 些 : 


@font-face { 
font-family: 'example'; 
src: url(example.ttf); 
font-style: normal; 


font-weight: normal; 
unicode-range: U+0025-00FF; 


估计 有 人 会 有 疑惑 ，@font-face 规 则 中 的 font-style、 
font-weight 和 unicode- range 这 些 属性 有 什么 用 ， 尤 其 是 
font-sty1le 和 font-weight。 实 际 上 ， 这 里 的 每 个 属性 都 不 是 泛 
泛 之 莘 ， 都 是 有 故事 的 。 


我 们 一 个 一 个 来 介绍 。 有 必要 预先 说 明 一 下 ， 为 了 更 清晰 地 示 
意 ， 下 面 的 CSS 示 意 代 码 都 刻意 做 了 简化 处 理 。 


1. font-family 


这 里 的 font -family 可 以 看 成 是 一 个 字体 变量 ， 名 称 可 以 非常 
随意 ， 如 直接 用 一 个 美元 符号 '$'。 例 如 : 


@font-face { 
font-family: '$'; 


src: url(example.ttf); 


韭 IE 浏 览 器 下 其 至 可 以 直接 使 用 纯 空格 ' '。 不 过 有 一 点 需要 注 
意 ， 束 是 使 用 这 些 稀奇 主 怪 的 字符 或 者 空格 的 时 候 ， 一 定 要 加 引号 。 


虽然 说 自己 变量 名 可 以 很 随意 ， 但 是 有 一 类 名 称 不 能 随便 设置 ， 
就 是 原本 系统 就 有 的 字体 名 称 。 例 如 ， 如 果 使 用 下 面 的 代码 从 此 “微软 
雅 黑 ” 字 体 就 变 成 了 这 里 example ,ttf 对 应 的 字体 了 。 


@font-face { 
font-family: 'Microsoft Yahei'; 


src: url(example.ttf); 


2. Src 


src 表 示 引 入 的 字体 资源 可 以 是 系统 字体 ， 也 可 以 是 外 链 字 体 。 
如 果 是 使 用 系统 安装 字体 ， 则 使 用 local( ) 功 能 符 ， 如 果 是 使 用 外 链 
字体 ， 则 使 用 ur1l( ) 功 能 符 。 由 于 local( ) 功 能 符 IE9 及 其 以 上 版 本 
浏览 右 才 文 择 ， 非 党 实用 ， 而 本 书目 标 浏 览 套 包 含 IE8 浏 览 右 ， 因 此 不 
做 展开 ， 有 兴趣 的 读者 可 以 参考 我 的 博客 文章 : 


http:/www.zhangxinxu.com/ wordpress/?p=6063 ° 
因此 ， 这 里 着 重 介绍 ur1() 功 能 符 。 


目前 在 业界 ， 凡 是 使 用 目 定 义 字 体 的 ， 郑 不 多 都 是 下 面 这 种 格 
式 : 


@font-face { 
font-family: ICON; 
src: url('icon.eot') format('eot'); 
src: Uril('icon.eot?#iefix') format('embedded-opentype'), 
url('icon.woff2') format("woff2") 


url('icon.woff') format("woff"), 
url('icon.ttf') format("typetrue"), 
url('icon.svg#icon') format('svg'); 
font-weight: normal; 
font-style: normal; 


不 知 大 家 有 没有 思考 过 : 为 什么 这 里 需要 有 两 个 src 呢 ? #iefix 
是 干什么 用 的 呢 ?》format( ) 功 能 符 有 什么 作用 ， 可 不 可 以 省 略 ? 这 
么 多 字体 格式 都 是 需要 的 吗 ? font-weight: normal 和 font- 


style:normal 是 不 是 多 余 的 ? 


先 解答 一 下 字体 格式 的 问题 。 上 面 这 段 CSS 代 码 一 共 出 现 了 5 种 字 
体格 式 ， 分 别 是 .eot、.,woff2、.woff、.ttf 和 .svg。 


。 SVg 格 式 是 为 了 兼容 iOS 4.1 及 其 之 前 的 版 本 ， 考 虑 到 现 如 今 iOS 的 
版 本 数 已 经 翻 了 一 秋 ， 所 以 svg 格 式 的 兼容 代码 大 可 舍弃 。 

。 eot 格 式 是 IE 私有 的 。 注 意 ， 目 前 所 有 版 本 的 正 浏 贤 右 都 文 持 eot 
格式 ， 并 不 是 只 有 IE6~IE8 文 择 。 只 是 ， 正 6~IE8 仅 文 择 eot 这 
一 种 字体 格式 。 

。 woff 是 web open font format 几 个 词 的 首 字母 测 写 ， 是 专门 为 Web 

开发 而 设计 的 字体 格式 ， 显 然 是 优先 使 用 的 字体 格式 ， 其 字体 尺 

寸 更 小 ， 加 载 更 快 。Android 4.4 开 始 全 面 支持 。 

woff2 是 比 woff 尺 寸 更 小 的 字体 ， 小 得 非 第 明显 。 因 此 ，Web 开 

发 第 一 首选 字体 瓯 是 woff2， 只 是 此 字体 目前 仅 Chrome 和 Firefox 

文 持 得 比较 好 。 

ttf 格 式 作为 系统 安装 字体 比较 多 ，Web 开 发 也 能 用 ， 就 是 尺寸 

大 了 点 儿 ， 优 点 在 于 老 版 本 Android 也 支持 。 


综合 上 面 的 分 析 ， 我 们 可 以 得 到 如 下 的 结论 。 


(1) svg 格式 果断 舍弃 。 


(2) 如 果 无 须 兼 容 正 8 浏览 器 ，eot 格 式 果 断 舍 弃 。 


(3) 如 果 无 须 兼容 Android 4.3 之 前 版 本 手机 ，ttf 格 式 果断 售 


弃 。 


也 束 是 说 ， 之 所 以 上 面 会 放 这 么 多 字体 格式 ， 完 全 是 因为 “兼容 
性 ”这 3 个 字 。 如 果 你 的 项 目 没 有 那么 多 兼容 顾虑 ， 大 可 精简 一 些 代 
码 。 当 然 ， 如 果 站 在 用 户 的 角度 ， 字 体格 式 多 一 点 儿 也 没什么 ， 反正 
现在 都 是 工具 生成 的 ， 多 了 几 十 个 字母 而 已 ， 又 不 会 产生 多 余 的 请 
求 ， 说 不 定 真有 用 户 使 用 古董 手 机 呢 ， 那 不 殉 赚 到 了 ? 


上 面 说 的 话 很 在 理 ， 但 这 并 不 表示 上 面 的 代码 就 没有 优化 的 空间 

了 。 正 如 上 面 提 到 的 ， 应 当 优先 使 用 woff2， 然 后 是 woff 格 式 字 体 。 
但 是 ， 如 果 我 们 仔细 看 上 面 的 代码 就 会 发 现 ， 在 下 浏览 器 下 ， 使 用 的 
永远 是 eot 格 式 的 字体 (因为 排 在 最 前 ) ， 而 woff 格 式 字 体 从 IE9 开 
始 就 支持 了 ， 浏 览 器 好 的 特性 都 没 用 上 啊 ! 但 是 ， 我 们 又 不 能 简单 地 
把 woff 格 式 提前 ， 否 则 会 影响 低 版 本 正 浏 览 器 的 字体 显示 。 怎 么 办 
呢 ? 有 一 个 小 技巧 如 下 : 
@font-face { 

font -family: ICON; 

src: url('icon.eot') format('eot'); 


src: local('e®'), 
url('icon.woff2') format("woff2") 


url('icon.woff') format("woff"), 
url('icon.ttf') format("typetrue"); 


由 于 IE6~IE8 不 认识 功能 符 ， 于 是 下 面 一 个 src 被 完美 避 开 了 。 
此 时 ， 正 9 浏览 器 就 可 以 正大 光明 地 享用 woff 字 体格 式 了 | 


接 下 来 解答 #iefix 有 什么 用 的 问题 。 实 际 上 ， 业 efix 有 十 没什么 
用 的 !“ 你 在 开玩笑 吗 ? ”没有 ， 这 里 的 #iefix 确 实 没什么 用 ， 真 正 有 
用 的 其 实 是 前 面 的 问号 。 束 跟 变 魔术 一 样 ， 吸 引 我 们 眼球 的 往往 不 古 
关键 所 在 。 是 这 样 的 ，IE9 之 前 的 版 本 解析 有 一 个 闫 重 的 问题 ， 当 src 
属性 包含 多 个 url( ) 时 ， 会 把 长 长 的 字符 当 作 一 个 地 址 解析 而 返回 
404 错 误 。 因 此 把 eot 格 式 放 在 第 一 位 ， 然 后 在 字体 文件 ur1l 地 址 后 加 
上 上 问 号， 这 样 IE9 之 前 的 版 本 会 把 问号 之 后 的 内 容 当 作 ur1 的 参数 。 好 
吧 ，#iefix 产 格 来 说 还 是 有 点 儿 用 的 ， 它 可 以 让 请 求 地 址 短 一 些 ， 
因此 请 求 地 址 是 不 包括 销 点 标志 # 及 其 后 面 的 内 容 的 。 如 果 按 照 这 种 
说 法 ， 那 已 不 是 说 iefix 这 几 个 字符 多 余 ? 没 错 ， 多 余 ! 不 懂 的 人 不 
知道 是 干什么 用 的 ， 懂 的 人 知道 它 是 没什么 用 的 ， 因 此 多 余 。 


下 面 轮 到 “为 什么 需要 两 个 src” 这 个 问题 了 。 如 果 是 原生 的 IE7 和 
IE8 浏 览 右 ， 第 一 个 src 实 际 上 是 多 余 的， 为 什么 这 么 讲 呢 ? 之 所 以 要 
放 上 来 ， 很 大 一 部 分 原因 是 为 了 测试 工程 师 。 因 为 现在 测试 工程 师 测 
斌 低 版 本 的 下 浏览 强 喜 欢 使 用 兼容 模式 ， 兼 容 模 式 的 三 和 原生 同 版 本 
的 IE 的 解析 是 有 区 别 的 ， 其 中 区 别 之 一 就 是 兼容 模式 的 IE7 和 IE8 不 认 
识 问号 (?) 解决 方案 ， 导 致 第 二 个 src 无 法 识别 ， 不 得 已 才 多 了 第 一 
行 的 src 。 


font-weight:normal 和 font-style:normal 是 不 是 多 余 
日 
是 


全 
的 ? 我 的 回答 是 ， 如 果 你 没有 同 字 体 名 的 多 字体 设置 ， 则 它 束 是 多 余 
的 ， 至 少 我 在 第 规 项 目 中 删 掉 这 两 行 CSS 没 有 出 现任 何 异 第 。 


最 后 的 问题 是 : format ( ) 功能 符 有 什么 作用 ， 可 不 可 以 省 略 ? 
我 的 回答 是 最 好 不 要 省 略 。format ( ) 功 能 符 的 作用 是 让 浏览 器 提前 
知道 字体 的 格式 ， 以 决定 是 否 需要 加 载 这 个 字体 ， 而 不 是 加 载 完了 之 
后 再 目 动 判断 。 举 个 例子 ， 下 面 的 CSS 代 码 在 Chrome 浏 览 旭 下 整 会 同 
时 加 载 eot 和 ttf 两 种 格式 字体 : 


@font-face { 
font-family: ICON; 


src: url('icon.eot'), 
url('icon.ttf"'); 


浏览 促 对 文件 格式 的 判断 不 是 基于 后 缀 名 ， 下 面 这 种 写法 只 会 加 
载 ttf 这 一 种 格式 字体 ， 因 为 浏览 如 前 知道 了 文件 格式 是 自己 无 法 
识别 的 : 
@font-face { 
font-family: ICON; 


src: Url(' icon,eot') format("embedded-opentype"), 
url('icon.ttf'); 


于 是 ， 综 合 上 面 的 全 部 知识 会 发 现 ， 业 办 前 用 的 这 套 东 西 ， 其 实 
可 以 优化 成 下 面 这 样 : 


@font-face { 
font-family: ICON; 
src: url('icon.eot'); 
src: local('®'), 


url('icon.woff2') format("woff2"), 
url('icon.woff') format("woff"), 
url('icon.ttf"'); 


有 一 种 一 周 瘦 10 厂 的 感觉 。 


3. font-style 


在 Chrome 浏 览 器 下 ，@font face 规 则 设置 font - 
style:italic 可 以 让 文字 倾斜 ， 但 是 这 并 不 是 其 作用 所 在 。 


@font face 规 则 中 的 font-style 和 font-weight 类 似 ， 都 
是 用 来 设置 对 应 字体 样式 或 字 重 下 该 使 用 什么 字体 。 因 为 有 些 字体 可 
能 会 有 专门 的 斜体 字体 ， 注 意 这 个 斜体 字体 并 不 是 让 文字 的 形状 倾 
斜 ， 而 是 专门 设计 的 倾斜 的 字体 ， 所 以 很 多 细 记 会 跟 物理 上 的 请 求 不 
一 样 。 于 是 ， 我 在 CSS 代 码 中 使 用 font -style:italic 的 时 候 ， 就 
会 调用 这 个 对 应 字体 ， 如 下 示意 : 
@font-face { 

font-family: 'I'; 


font-style: normal; 
src: local('FZYaoti'); 


} 

@font-face { 
font-family: 'I'; 
font-style: italic; 
src: local('FZShuTi"'); 


由 于 专门 的 斜体 字 不 太 好 找 ， 所 以 我 使 用 “方正 姚 体 *" 和 “方正 舍 
体 ” 代 替 做 示意 。 我 解读 一 下 上 面 的 CSS 代 码 : 制定 一 个 字体 ， 名 
叫 ' 工 ， 当 文字 样式 正常 的 时 候 ， 字 体 表 现 使 用 “方正 姚 体 ”， 当 文字 
设置 了 font-style:italic 的 时 候 ， 字 体 表现 为 “方正 舒 体 ”。 


好 ， 现 在 假设 有 下 面 这 样 的 CSS 和 HTML: 


.i { 
font-family: 工 ; 
} 


<p><i class="i"> 类 名 是 i， 标 签 是 i</i></p> 
<p><span class="i"> 类 名 是 i， 标 签 是 span</span></p> 


请 问 最 终 的 表现 会 是 怎样 的 ? 


由 于 <i> 标 签 天 然 有 font-style:italic， 因 此 理论 上 ， 上 面 
一 行文 字 表 现 为 “方正 舒 体 *"， 下 面 一 行为 “方正 姚 体 *， 最 终结 果 如 何 
呢 ? 看 ， 完 全 符合 ， 如 图 8-23 所 示 。 


苇 扣 建 j， 站 从 奸 i 


类 名 是 i, 标签 是 span 


图 8-23 @font face 中 font-style 作 用 示意 


这 下 大 家 应 该 明白 @font face 规 则 中 的 font-style 是 干什么 
用 的 了 吧 。 


4. font-weight 


font-weight 和 font-style 类 似 ， 只 不 过 它 定义 了 不 同 字 
重 、 使 用 不 同 字体 。 对 中 文 而 言 ， 这 个 要 比 font -sty1e 适 用 性 强 很 
多 。 我 举 个 比较 有 代表 性 的 例子 演示 一 下 它 的 作用 : 版 权 字体 “ 汉 仪 旗 
黑 ” 字 重 非常 丰富 ， 但 是 这 个 字体 不 像 “ 思 源 黑 体 *"， 天 然 可 以 根据 
font-weight 属 性 值 加 载 对 应 的 字体 文件 ， 那 怎么 办 呢 ? 很 简单 ， 
使 用 @font face 规 则 重新 定义 一 下 即 可 。 例 如 ， 使 用 下 面 的 CSS 代 
码 : 


@font-face { 
font-family: 'QH'; 
font-weight: 400; 
src: local('HYQihei 40S'); 


} 

@font-face { 
font-family: 'QH'; 
font-weight: 500; 
src: local('HYQihei 50S'); 


} 

@font-face { 
font-family: 'QH'; 
font-weight: 600; 
src: local('HYQihei 60S'); 


上 


解读 一 下 就 是 : 是 一 个 全 新 的 字体 ， 名 为 'QH'。 当 字 重 font - 
weight 为 400 的 时 候 ， 使 用 “ 汉 仪 旗 黑 40S” 字 重 字 体 ， 为 500 的 时 
候 ， 使 用 * 汉 仪 旗 黑 50S” 字 重 字体 ;为 600 的 时 候 ， 使 用 “ 汉 仪 旗 黑 
60S” 字 重 字体 。 


于 是 ， 当 我 们 使 用 如 下 CSS 和 HTML 代码 的 时 候 : 


.hy-40s, 

.hy-50s, 

.hy-60s { 
font-family: 


} 
.hy-40s { 
font-weight: 


} 
.hy-50s { 
font-weight: 


} 
.hy-60s { 
font-weight: 


<ul> 
<11 class="hy-40s"> 汉 仪 旗 黑 406s</1i> 
<11 class="hy-50s"> 汉 仪 旗 黑 50s</1i> 
<11 class="hy-60s"> 汉 仪 旗 黑 60s</1i> 
</ul> 


束 可 以 看 到 文字 粗细 错落 有 人 致 的 效果 ， 如 图 8-24 所 示 。 


。 汉 仪 旗 黑 40s 
。 汉 仪 旗 黑 50s 
。 汉 仪 旗 黑 60s 


图 8-24 @font face 中 font -weight 作 用 示意 


如 果 用 在 网 页 开发 中 ， 必 定 会 让 我 们 的 界面 更 加 细 胶 ， 设 计 更 加 
精致 ， 视 觉 更 加 愉悦 。 然 而 ， 此 处 的 案例 是 基于 1ocal( ) 功 能 符 的 ， 
IE8 浏 览 器 并 不 支持 ， 因 此 font -weight 原 本 作用 的 使 用 场景 受到 了 
一 定 的 限制 ， 只 能 渐进 使 用 。 但 是 ， 


泛 使 用 的 功能 往往 并 不 是 其 设计 之 初 的 功能 ， 
出 来 的 ， 由 于 font -weight 支 持 100~-900 足 足 9 个 字 重 ， 而 font - 


正如 很 多 其 他 CSS 属 性 一 样 ， 广 


而 是 基于 一 些 特性 衍生 


sty1e 仅 “正和 “和 斜 "两 类 ， 因 此 ，font -weight 就 被 委 以 重任 来 实 


现 “ 咯 应 式 图 标 ?， 而 IE7 和 IE8 浏 


所 谓 “ 啊 应 式 图 标 "?， 指 的 是 子 号 较 大 时 图 标 字 体 细 市 更 丰富 ， 
号 较 小 时 图 标 字 体 更 简单 的 啊 应 式 处 理 。 对 比 效果 如 图 8-25 所 示 。 


| 


图 8-25 


代码 示意 如 下 : 


“响应 式 


中信 蝇 已 


览 需 都 是 文 持 这 个 的 。 


， 
. 


图 标 ” 效 果 示 意 


字 


@font-face { 
font-family: ICON; 
src: url(icon-large.eot); 
src: local("e"), 
url(icon-large.woff); 
font-weight: 700; 


} 
@font-face { 
font-family: ICON; 
src: url(icon-medium.eot); 
src: local("e"), 
url(icon-medium.woff); 
font-weight: 400; 


} 
@font-face { 
font-family: ICON; 
src: url(icon-small.eot); 
src: local("e"), 
url(icon-small .woff); 
font-weight: 100; 


} 


此 时 ， 不 同 的 font -weight 会 加 载 不 同 的 图 标 子 体 ， 然 后 束 能 
根据 具体 的 场景 细 化 我 们 的 图 标 显示 细 方 。 假 设 有 下 面 的 CSS 设 置 : 


.icon { 
font-family: ICON; 


.icon-large { 
font-weight: 700; 
font-size: 128px; 

} 

.icon-medium { 
font-weight: 400; 
font-size: 64px; 


.icon-small { 
font-weight: 100; 
font-size: 16px; 


} 


则 下 面 HTML 代 码 中 的 3 个 <i> 标 签 所 显示 的 效果 分 别 对 应 “弱化 细 市 
的 图 标 ”“ 细 廊 较 丰富 图 标 " 和 “ 细 市 最 丰富 图 标 ”: 


<i class="icon icon-small">&#x1if3a4;</i> 
<i class="icon icon-medium">&#x1if3a4;</i> 


<i class="icon icon-large">&#x1if3a4;</i> 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/8/5-1.php 或 者 扫 右 侧 
的 二 维 码 。 


5. Unicode-range 


unicode-range 的 作用 是 可 以 让 特定 的 字符 或 者 特定 范围 的 字 
符 使 用 指定 的 字体 。 例 如 , “微软 雅 黑 * 字 体 的 引号 左右 间 际 不 均 ， 方 
向 不 明 ， 实 在 是 看 着 不 舒服 ， 此 时 我 们 就 专门 指定 这 两 个 引号 使 用 其 
他 字体 ，CSS 代 码 如 下 : 

@font-face { 
font-family: quote; 


src: local('SimSun'); 
unicode-range: U+201c, U+201d; 


} 
.font { 


font-family: quote, 'Microsoft Yahei'; 


} 


此 时 效果 就 会 如 图 8-26 所 示 。 
我 是 C 宙 软 雅 粤 22 
是 小 软 雅 周 22 


YY 


图 8-26 ”unicode-range 的 作用 效果 示意 


由 于 IE8 浏 览 器 不 支持 unicode-range 属 性 ， 因 此 ， 这 里 仅 简单 
提 及 ， 不 做 展开 ， 更 多 内 容 可 参考 我 写 的 博客 文章 : 


http:/www.zhangxinxu.com/wordpress/?p=6063 ° 


8.5.2 @font face 与 字体 图 标 技术 


从 面向 未 来 的 角度 讲 ， 了 字体 图 标 技术 的 使 用 会 越 来 越 边 绿化， 
为 和 SVG 图 标 技术 相 比 ， 其 唯一 的 优势 就 是 兼容 一 些 老 的 下 浏览 器 。 
等 再 过 儿 年 ，IE8 等 浏 唤 器 彻底 被 淘汰 了 ， 我 们 整 没 有 任何 使 用 字体 图 
标 技术 的 理由 了 。 


SVG 图 标 同 样 是 矢量 的 ， 同 样 闫 色 可 控 ， 但 资源 占用 更 少 ， 加 载 
体验 更 好 ， 呈 现 效 有 果 更 佳 ， 更 加 符合 语义 ， 我 个 人 是 非常 推 潜 SVG 图 
标的 。 


目前 ， 对 于 很 多 桌面 端 Web 项 目 ，IE8 浏 览 器 还 是 不 能 忽视 的 ， 
此 ， 了 字体 图 标 技术 依然 是 非常 值得 推荐 的 技术 选 型 ， 因 为 和 传统 的 图 
片 图 标 相 比 ， 字 体 图 标的 尺寸 大 小 和 颜色 控制 非常 方便 ， 开 发 维护 方 
面 占用 流量 小 很 多 ， 收 益 是 非常 明显 的 。 


对 字体 图 标 ， 我 们 可 以 手工 使 用 一 些 软件 制作 ， 但 这 种 做 法 效率 
非常 低下 ， 也 不 好 维护 ， 所 以 基本 上 现在 都 是 使 用 工具 来 完成 ， 如 使 
用 iconfont.cn 这 样 的 在 线 工 具 ， 或 者 使 用 基于 Node.js 的 一 些 开 源 工 
县 。 


一 从 


根据 我 的 使 用 经 验 ， 这 些 工 具 都 会 生成 类 似 下 面 这 样 的 CSS 代 
人 码 : 


@font-face { 
font-family: ICON; 
src: url(icon.eot); 
src: uril(icon.eot?#iefix) format('embedded-opentype'), 
url(icon.eot.woff2) format(' woff2 ' )， 
url(icon.eot.woff) format('woff ' ) ， 


.icon { 
font-family: ICON; 


.icon-microphone:before { 
content: '\1f3a4' 


这 里 出 现 两 个 需要 关注 的 东西 ， 一 个 是 字体 ， 男 一 个 是 了 字符， 而 
这 两 个 东西 束 古 字体 图 标 技 术 的 本 质 所 在 。 


我 们 不 妨 先 来 粗略 了 解 一 下 字体 的 本 质 是 什么 。 所谓 字 体 ， 本 质 
上 走 字 符 集 和 图 形 的 一 种 映 映 和 关系。 这 么 解释 似乎 还 是 有 些 擂 口 ， 那 
我 再 换个 更 通俗 一 点 儿 的 比方 吧 。 一 个 字体 文件 加 好 比 一 个 巨型 商品 
房 ， 里 面 有 很 多 房间 ， 每 个 房间 都 有 一 个 唯一 的 门牌 号 ， 然 后 这 些 房 
间 束 专门 用 来 挂名 画 。 


这 里 的 “门牌 号 ? 束 是 “字符 集 ”, “房间 里 的 名 画 ? 就 是 我 们 的 “字体 
图 形 ”。 举 个 例子 , “家 ”这 个 汉字 Unicode 编 码 是 5BB6， 这 个 5BB6 职 


征 “|] 牌 号 "， 在 中 文字 体 中 ， 这 个 “门牌 号 ?对 应 的 房间 里 面 的 画作 束 
长 得 是 “家 ”这 个 肉眼 所 见 的 字符 形状 。 也 整 是 说 ， 一 个 字符 编码 对 应 
= 

好 ， 现 在 如 来 我 们 通过 一 定 的 手段 ， 把 挂 5BBB6 这 个 “| ] 牌 号 ”房间 
里 面 的 画作 改 成 一 个 房屋 的 形状 ， 那 则 不 是 使 用 这 个 字体 文件 的 时 
候 , “家” 束 不 是 “家 ”， 而 古 图 8-27 所 示 的 房子 了 呢 ? 


I 


图 8-27 房子 图 形 


字体 图 标 技术 就 是 使 用 类 似 的 原理 实现 的 ， 即 把 通常 的 字符 映射 
成 为 另外 的 图 标 形状 ， 于 是 ， 虽 然 我 们 眼睛 看 到 的 十 个 图 标 ， 但 是 实 
际 上 它 本 质 上 就 十 一 个 普通 的 字符 。 


回 到 我 们 上 面 的 示意 代码 : 


.icon { 
font-family: ICON; 


.icon-microphone:before { 
content: '\1f3a4' 


这 里 ，1f3a4 就 是 一 个 唯一 的 “门牌 号 ”， 在 通常 的 字体 下 ， 其 字符 展 
示 的 是 一 个 斜 的 麦克 风 ， 如 图 8-28 所 示 。 但 是 ， 在 ICON 这 个 字体 中 ， 
1f3a4 的 图 形 被 映射 成 了 一 个 正 立 的 麦克 风 图 形 ， 最 后 的 显示 如 图 8- 
29 所 示 这 上 般 。 


分 


Ga) 


图 8-28 ”原来 的 倾斜 麦克 风 图 形 


自 
于: 


图 8-29” 自 定义 字体 下 正 立 的 麦克 风 图 形 


知道 了 字体 图 标 技术 的 原理 ， 我 们 殊 能 很 好 地 理解 一 些 泻 染 现象 
2 


(1) 因为 原始 字符 和 最 终 的 图 形 表现 相差 很 大 ， 所 以 当 我 们 的 字 
体 文件 加 载 缓慢 的 时 候 ， 可 以 明显 看 到 字符 变 图 形 的 过 程 ， 这 种 加 载 
体验 是 不 太 友好 的 ， 字 体内 联 在 CSS 文 件 中 可 以 有 效 避 免 这 一 问题 ， 
但 往往 字体 文件 体积 都 比较 大 ， 这 样 处 理 得 不 偿 失 。 据 我 所 知 ， 除 此 
之 外 并 没有 非常 好 的 解决 方法 。 


(2) 原始 的 字符 x-height 和 最 终 的 图 形 x-height 往 往 是 不 一 
样 的 ， 这 会 影响 内 联 元 素 的 垂直 对 齐 ， 因 此 很 容易 出 现 页 面 高 度 闪 动 
情况 ， 这 种 加 载体 验 也 是 不 友好 的 。 


(3) 原始 字符 的 ch 宽度 ， 也 就 是 水 平 占据 的 宽度 和 最 终 的 图 形 
也 是 不 一 样 的 ， 因 此 很 容易 出 现 内 联 元 聚 水 平方 向 部 动 的 问题 ， 这 种 
加 载体 验 也 是 不 友好 的 ， 为 此 图 标 束 需 要 设 定 具 体 宽 度 值 ， 例 如 : 


.icon { 
display: inline-block; 
width: 20px; 


text-align: center 
font-family: ICON 
} 


当然 也 能 很 好 地 享用 字符 的 一 些 特性 ， 如 用 font-size 改 变 尺 
寸 用 colLor 改 变 颜 色 ， 用 text-shadow 增 加 阴影 ， 以 及 用 
writing-mode 实 现 低 版 本 下 浏览 器 下 的 旋转 效果 ， 等 等 。 


当 我 们 使 用 工具 生成 图 标 字体 的 时 候 ， 无 论 是 在 线 工具 还 是 本 地 
工具 ， 其 中 间 的 媒介 都 是 SVG 多 标 ， 但 是 并 不 是 所 有 的 SVG 图 标 都 是 
可 以 的 ， 根 据 我 的 经 验 ， 最 好 满足 下 面 3 点 。 


(1) 纯 路 径 ， 纯 矢量 ， 不 要 有 base64 内 联 图 形 。 


(2) 使 用 填充 而 非 描 边 ， 也 尽量 避免 使 用 一 些 高 级 的 路 径 填充 履 
次 技巧 。 


(3) 宽 高 矿 寸 最 好 都 大 于 200， 因 为 字体 生成 的 时 候 ， 坐 标 值 会 
四 会 五 入 ，SVG 尺 寸 过 小 会 导致 坐标 取 值 偏差 较 大 ， 使 最 终 的 图 标 不 
够 精致 。 


有 人 可 能 会 问 : 我 可 不 可 以 把 映射 字符 直接 写 在 页 面 中 ， 而 不 是 
放 在 :before 伪 元 素 中 ?也 就 是 不 需要 下 面 的 CSS 代 码 : 


.icon-microphone:before { 
content: '\1f3a4' 


而 是 直接 用 : 


从 技术 实现 的 角度 来 讲 这 是 完全 可 以 的 ， 而 且 不 文 持 伪 元 素 的 IE7 
等 浏 贤 亏 都 文 持 这 样 做 。 但 是 在 实际 开发 的 时 候 ， 我 并 不 建议 这 人 么 
做 ， 有 两 点 原因 : 一 是 不 好 维护 ， 如 有 果 以 后 子 符 映 冉 天 系 改 变 ， 而 图 
标 HTML 是 散布 在 各 个 页 面 中 的 ， 那 么 我 们 的 改动 束 会 很 所 烦 ， 二 是 
从 语义 角度 考虑 ， 图 标 字 符 往 往 是 不 包含 任 何 意义 的 ， 应 该 没有 必要 
让 搜索 引擎 知道 ， 也 无 须 让 辅助 设备 读 取 ， 而 伪 元 素 恰好 有 这 样 的 功 
能 ， 如 果 内 联 在 HTML 中 ， 则 反而 成 了 一 种 干扰 。 


8.6 ”文本 的 控制 


CSS 有 很 多 属性 专门 用 来 对 文本 进行 控制 ， 由 于 这 些 属性 的 作用 
机 制 往往 是 基于 内 联 盒 模型 的 ， 因 此 对 于 内 联 块 状元 素 同样 也 是 有 效 
果 的 ， 这 束 使 得 这 些 CSS 属性 作用 范围 更 广 了 ， 甚 至 可 以 影响 布局 。 


8.6.1 text-indent 与 内 联 元 素 缩 进 


顾名思义 ，text -indent 就 是 对 文本 进行 缩 进 控制 ， 其 设计 之 
初 的 作用 应 该 是 实现 类 似 图 8-30 所 示 的 缩 进 效果 。 


依 进 
NS ， 在 学 识 方面 , 没有 人 能 胜 过 苟 寒食 ， 能 让 他 佩 
服 的 人 也 很 少 ， 今夜， 陈 长 生 做 到 了 这 一 点 。 


育 进 ” ”他 看 着 苟 寒食 说 道 : “不 敢当 。” 
”他 想起 惊 才 绝 艳 的 大 师兄 ， 想 到 这 场 婚事 ， 竟 
发 现 展 无 声 筷 间 ， 自 己 对 师兄 的 信心 竟 有 些 动摇 。 


图 8-30 ” 缩 进 效果 示意 


但 是 这 种 缩 进 对 内 容 要 求 比较 高 ， 如 果 段 落 摊 杂 英文 、 数 字 或 者 
图 片 等 内 容 ， 缩 进 反 而 可 能 会 给 人 以 参差 不 齐 的 感觉 ， 加 上 现代 Web 
形式 更 加 多 样 ，text -indent 在 实际 项 目 中 的 应 用 已 经 脱离 了 它 原 
本 的 设计 初 训 


首先 用 得 比较 多 的 是 text-indent 负 值 隐 藏 文本 内 容 。 比 方 
说 ， 很 多 网 站 的 标识 (logo) 就 是 网 站 的 名 称 ， 从 SEO 的 角度 讲 ， 我 
们 大 可 以 使 用 <h1> 和 <h2> 这 种 级 别 的 标签 放置 我 们 的 标识 ， 同 时 写 
上 对 应 的 文字 内 容 。 例 如 : 


<h1 class="1ogo">CSS 世 界 </h1> 


此 时 ， 我 们 就 可 以 使 用 text-indent 负 值 隐 藏 这 里 的 文字 : 


.J]ogo { 
width: 120px; 


background: url(logo.png); 
text-indent: -120px; 


很 多 人 喜欢 设置 一 个 很 大 的 text-indent 负 值 ， 如 text- 
indent : -9999em， 我 是 不 建议 这 么 做 的 。 首 先 ， 这 样 做 在 某 些 设备 
下 有 潜在 的 性 能 风险 ， 体 现在 滚屏 的 时 候 会 发 生 卡 顿 ; 其 次 ， 对 于 一 
些 智能 设备 的 屏幕 阅读 软件 ， 如 VoiceOver， 如 果 内 容 缩 进 在 屏幕 之 
外 ， 它 是 不 会 读 取 的 ， 这 样 就 降低 了 页 面 的 无 障碍 访问 能 


另外 ，text-indent 负 值 缩 进 在 部 分 浏览 器 下 会 影响 元 素 的 
outline 区 域 ， 通常 需要 再 设置 overflow:hidden。 


下 面 我 要 问 大 家 提 个 问题 ， 如 果 单 看 最 终 的 CSS 样 式 效果 ， 代 码 


.J]ogo { 
width: 120px; 
text-indent: -120px; 


width: 120px; 
text-indent: -100%; 


} 


答案 是 ， 不 等 同 ， 而 且 有 着 本 质 上 的 差异 。 


text-indent 的 百分比 值 是 相对 于 当前 元 素 的 “包含 块 ” 计 算 的 ， 
而 不 是 当前 元 素 。 由 于 text-indent 最 终 作 用 的 是 当前 元 素 里 的 内 
联 盒子 ， 因 此 很 容易 让 人 误 以 为 text-indent 的 百分比 值 是 相对 于 
当前 元 素 宽 度 计算 的 。 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/8/6-1.php 或 者 扫 下 面 
的 二 维 码 。 结 果 text-indent: -120px 缩 进 在 盒子 之 外 ， 而 text - 
indent : -100% 早 已 缩 进 到 天 涯 海 角 ， 连 影子 都 看 不 到 ， 如 图 8-31 所 
作 \ O 


text-indent: -420px; 


CSS 世 界 * [ | 
text-indent:-1400%; 


? [| | 


图 8-31 ”百分比 值 缩 进 计 算 示 意 


因此 ， 一 些 流 传 很 广 的 text -indent 隐 藏 文本 CSS 代 码 片段 其 实 
是 有 隐患 的 。 例 如 : 


.hide-text { 
text-indent: 100%; 
white-space: nowrap; 
overflow: hidden; 


在 正 稼 情况 下 ， 确 实 可 以 隐藏 文字 ， 而 且 无 论 是 一 行 还 是 多 行 都 可 以 
非常 兼容 地 隐藏 ， 因 为 一 般 情况 下 “包含 块 ” 的 冤 度 都 会 大 于 子 元 素 的 
宽度 ， 所 以 我 们 十 看 不 出 问题 来 的 。 但 是 一 旦 “包含 块 ” 的 宽度 反而 小 
了 ， 那 么 这 段 代 码 束 会 出 现 样 式 问 题 。 我 举 个 位 单 的 例子 : 


<div style="position:absolute;"> 
<p class="hide-text" style="position:absolute;"> 坚 挺 </p> 


</div> 

此 时 “坚挺 ?两 个 字 绝 对 是 纹 丝 不 动 ， 绝 对 定位 具有 包 囊 性 ， 而 子 元 素 
也 是 绝对 定位 的 ，hide -text 上 所 在 元 素 的 “包含 块 > 的 宽度 承 是 0， 此 
时 text-indent:100% 计 算 值 也 是 0， 文 本 缩 进 隐藏 彻底 失败 。 


关于 text-indent 的 百分比 值 ， 我 还 想 再 多 说 几 句 ， 那 就 是 
text-indent 支 持 百 分 比值 其 实 算是 比较 “有 个 性 的 "， 因 为 在 CSS 世 


界 中 ， 与 文本 控制 相关 的 CSS 属 性 支持 百分比 值 的 并 不 多 ， 例 如 ， 
letter-spacing、word-spacing 和 text-shadow 等 都 不 支持 。 


当然 ， 随 着 CSS 的 发 展 ， 以 后 可 能 会 支持 ， 例 如 ，word-spacing 新 
草案 增加 了 百分比 值 并 且 已 有 浏览 器 开始 支持 。 


那么 ，text-indent 百 分 比值 还 有 没有 实际 价值 呢 ? 从 理论 上 
讲 ， 我 们 可 以 使 用 text- indent 实 现 宽度 已 知 内 联 元 素 的 居中 效 
果 ， 例 如 : 


.box { 
text-indent: 50%; 


.box img { 


width: 256px; 
margin-left: -128px; 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/8/6-2.php 或 者 扫 右 侧 
的 二 维 码 感受 一 下 居中 效果 。 


但 是 ， 由 于 text-align 属 性 的 存在 ， 这 种 居中 小 技巧 平常 使 用 
的 机 会 很 少 ， 除 非 是 text -align 不 能 设置 为 center 的 场景 。 


因此 说 来 说 去 ，text -indent 百 分 比值 就 是 一 个 扶 不 起 的 阿 
斗 ， 还 是 固定 的 长 度 值 用 得 更 多 。 比 如 ， 在 标签 受 限 的 情况 下 实现 一 
些 特殊 的 布局 效果 ，CSS 和 HTML 代 码 如 下 : 


pt 


text-indent: -3em; 
padding-left: 3em; 


司 : 问题 内 容 . . .</p> 
:回答 内 容 .. .</p> 


辣 题 内 容 ., . .</p> 
答 内 容 . . .</p> 


另外 ，text-indent 还 有 一 个 比较 生 个 的 应 用 。 在 Chrome 浏 览 
器 下 ， 如 果 <img> 标 签 没 有 设置 src 属 性 ， 则 会 出 现 一 个 灰色 的 线 


框 ， 如 图 8-33 所 示 。 


担 间 : 你 是 如 何 评 价 text-indent 百 分 比值 的 ? 

回答 : 我 其 实 一 开始 是 对 text-indent 百 分 比值 抱 
有 很 大 期 望 的 ， 径 望 可 以 有 一 些 非常 尽 利 
的 应 用 ， 但 是 后 来 发 现 ， 要 么 有 缺陷 ， 要 
么 鸡肋 。 或 许 是 自己 擎 握 的 还 不 够 吧 ! 


提问 : text-indent 有 什么 其 他 特性 吗 ? 


答 : text-indent 县 有 继承 性 ， 因此， 级 别 较 高 
的 祖先 元 素 愤 用 ; 另外 ， 其 仅 对 第 一 行内 
联 元 素 有 效 早 。 


图 8-32 text-align 与 纯 文 本 对 齐 布局 效果 


图 8-33 src 属性 缺失 时 候 出 现 的 边框 


根据 研究 我 发 现 ， 此 灰色 边框 是 预 留 给 alt 属 性 值 用 的 ， 是 内 联 
水 平 元 素 ， 因 此 可 以 使 用 text-indent 属 性 隐藏 之 ， 例 如 ; 


Img { 
text-indent: -400px; 


overflow: hidden; 


} 


无 src 的 <img> 本 质 上 就 是 一 个 普通 元 素 ， 因 此 ， 此 时 
overflow:hidden 也 是 有 效 的 。 


最 后 再 说 几 个 你 可 能 不 知道 的 小 知识 。 
(1) text-indent 仅 对 第 一 行内 联 盒子 内 容 有 效 。 


(2) 非 奉 换 元 素 以 外 的 display 计算 值 为 in1ine 的 内 联 元 素 设 
置 text-indent 值 无 效 ， 如 有 果 计 算 值 是 jnline-block/inline- 
table 则 会 生效 。 因 此 ， 如 果 父 级 块 状元 素 设置 了 text-indent 属 
性 值 ， 子 ijnline-block/inline-table 需 要 设置 text- 
indent:0 重 置 。 


(3) <input> 标 签 按钮 text-indent 值 无 效 。 


(4) <button> 标 签 按钮 text -indent 值 有 效 ， 但 是 存在 兼容 
性 差异 ，IE 浏 贤 右 理解 为 单 标签 ， 百 分 比值 按照 容器 计算 ， 而 Chrome 
和 Firefox 浏 览 右 标签 内 还 有 其 他 Shadow DOM 元 素 ， 因 此 百分比 值 是 
按照 目 喘 的 尺寸 计算 的 。 


(5) <input> 和 <textarea> 输 入 框 的 text-indent 在 低 版 本 
IE 浏 览 器 下 有 兼容 问题 。 
8.6.2 letter-spacing 与 字符 间距 


letter-spacing 可 以 用 来 控制 字符 之 间 的 间距 ， 这 里 说 的 “ 字 
和 从 ”包括 英文 字母 、 汉 字 以 及 空格 等 。 例 如 : 


st { 
letter-spacing: .5em; 


表现 残 会 这 样 宽 松 : 
letter spacineg 
letter-spocing 具 有 以 下 一 些 特性 。 


(1) 继承 性 。 


(2) 默认 值 是 normal 而 不 是 9。 虽然 说 正常 情况 下 ，normal 的 
计算 值 就 是 ge， 但 两 者 还 是 有 差别 的 ， 在 有 些 场景 下 ，1Letter- 
spacing 会 调整 hormal 的 计算 值 以 实现 更 好 的 版 面 布局 。 


(3) 支持 负 值 ， 且 值 足 够 大 的 时 候 ， 会 让 字符 形成 重 苟 ， 甚 至 反 
向 排列 〈 非 正 浏览 器 ) 。 例 如 : 


.1t { 
letter-spacing: -2em; 


此 时 在 非 IE 浏 览 器 下 ， 下 面 的 HTML 从 左 往 右 呈 现 出 来 的 就 不 是 “一 
ne MU I 


至 于 I 下 浏览 器 ， 最 多 只 能 完全 重合 ， 无 法 反问 排列。 


另外 ，letter-spacing 负 值 仅 能 让 字符 重 全 ， 但 是 不 能 让 替换 
元 素 或 者 inline-block/ inline-table 元 素 发 生 重 又 。 


(4) 和 text-indent 属 性 一 样 ， 无 论 值 多 大 或 多 小 ， 第 一 行 一 
定 会 保留 至 少 一 个 字符 。letter-spacing 还 有 一 个 非常 有 意思 的 特 
性 就 是 ， 在 默认 的 左 对 齐 情况 下 ， 无 论 值 如 何 设置 ， 第 一 个 字符 的 位 
置 一 定 是 纹 丝 不 动 的 。 


(5) 支持 小 数值 ， 即 使 9.1px 也 是 支持 的 ， 但 并 不 总 能 看 到 效 
果 ， 这 与 屏幕 的 密度 有 关 。 对 普通 的 昌 面 显示 器 ， 设 备 像素 比 是 1， 
最 小 泻 染 单位 是 1px， 因 此 ， 需 要 至 少 连续 10 个 字符 ， 才 能 看 到 
0 .1px 产 生 的 1px 间 距 变 化 ， 如 果 是 9 个 字符 ， 则 不 会 有 效果 ， 这 很 可 
能 会 让 人 误 以 为 letter-spacing 不 支持 非常 小 的 数值 ， 实 际 上 是 支 
持 的 。 


(6) 暂 不 支持 百分比 值 。 


在 实际 开发 的 时 候 ，letter-spacing 除 了 控制 文字 内 容 排版 
外 ， 还 可 以 修复 一 些 布局 上 的 问题 。 例 如 ， 清 除 jnline-block 列 表 
由 于 换行 符 或 者 空格 产生 的 空白 间 阶 ， 使 我 们 的 布局 控制 更 精准 : 


.box { 
letter-spacing: -1em; 


.list { 
letter-spacing: 0; 


此 处 -1em 换 成 -109em 也 是 可 以 的 。 正 如 上 面 提 到 的 ，letter- 
spacing 的 值 再 小 也 不 会 让 inlLine-b1lock 列 表 发 生 重 至 。 由 于 
letter-spacing 具 有 继承 性 ， 为 了 不 影响 列表 里 面 字符 内 容 的 排 
版 ， 我 们 可 以 使 用 letter-spacing :0 进行 重 置 ， 当 然 ， 亦 可 以 使 


用 默认 值 letter-spacing:normal 重 置 。 从 理论 上 讲 ， 后 一 种 重 
置 更 稳妥 一 些 。 


由 于 letter-spacing 负 值 的 字体 重合 特性 ， 我 们 还 可 以 利用 该 
属性 实现 一 些 文本 动 效 ， 核 心 CSS 代 码 如 下 : 
title { 
animation: textIn 1s both,; 
ee textIn { 


QO% { 
letter-spacing: -200px; 


} 
100% { 
letter-spacing: 0; 


} 


} 


这 样 束 可 以 有 文字 依次 飞 入 的 效果 了 ， 如 图 8-34 所 示 。 


| 


我 是 标题 文字 内 容 


图 8-34 ”字符 动 效 分 步 示意 


需要 注意 的 是 ， 由 于 IE 浏 览 器 的 letter-spacing 负 值 不 会 有 反 
向 排列 效果 ， 因 此 ， 此 技术 目前 只 适合 移动 端 这 类 无 须 关 心 耻 浏览 器 
的 项 目 。 


如 宁 想 亲 目 感受 效果 ， 手 动 输入 http:/demo.cssworld.cn/8/6-4.php 
或 者 扫 右 侧 的 二 维 码 。 


提示 : 点 击 文 字 内 容 ， 动 画 会 重新 泻 染 。 
8.6.3 word-spacing 与 单词 间距 
word-spacing 和 letter-spacing 名 称 类 似 ， 其 特性 也 有 很 
多 共通 之 处 : 


(1) 都 具有 继承 性 。 


(2) 默认 值 都 是 normal 而 不 是 90。 通常 情况 下 ， 两 者 表现 并 无 


差异 。 


(3) 都 支持 负 值 ， 都 可 以 让 字符 重 于 ， 但 是 对 于 inline- 
block 和 inline-table 元 素 却 存在 兼容 性 差异 ，Chrome 浏 览 絮 下 可 
以 重 琶 ， 耻 和 Firefox 浏 览 器 下 则 再 大 的 负 值 也 不 会 重 琶 ， 因 此 不 适合 
使 用 word-spacing 来 清除 空白 间隙 。 


(4) 都 支持 小 数值 ， 如 word-spacing:0.5px。 


(5) 在 目前 的 CSS2.1 规 范 中 ， 并 不 支持 百分比 值 ， 但 新 的 草案 中 
新 增 了 对 百 分 值 的 支持 ， 是 根据 相对 于 字符 的 “ 步 进 宽度 ”(advance 
width) 计算 的 。 这 属于 新 世界 内 容 ， 本 书 不 做 介绍 。 


(6) 间隔 算法 都 会 受到 text-align:justify 两 端 对 齐 的 影 
响 。 
当然 也 有 差异 。letter-spacing 作 用 于 所 有 字符 ， 但 word- 


spacing 仅 作用 于 空格 字符 。 注 意 ， 是 作用 在 “空格 ”上 ， 而 不 是 字面 
意义 上 的 “单词 ”。 例 如 ， 假 设 有 以 下 CSS 和 HTML: 


.Wp 
word-spacing: 20px; 


<p class="wp"> 我 love 前 端 ! </p> 


love 虽 然 是 一 个 单词 ， 但 没有 空格 ， 那 么 很 抱 茹 ，word-spacing 
无 效 。 


换 句 话说 ，word-spacing 的 作用 就 是 增加 空格 的 间隙 宽度 。 有 
空格 就 有 效 ， 可 以 是 Space 键 敲 出 来 的 空格 〈U+0020) ， 也 可 以 是 换 
行 符 产生 的 空格 (浏览 器 解析 为 U+00920) ， 还 可 以 是 Tab 键 敲 出 来 的 
空格 (U+0009) ， 抑 或 是 &npsp ; 非 换行 空格 (U+00A0) 。 例 如 : 


<p class="wp"> 我 有 空 格 ， 我 


此 时 ,“ 衬 ?和 * 格 ”两 个 字 中 间 的 间 队 就 是 原本 的 空格 宽度 +word- 
spacing 设 置 的 20px， 如 图 8-35 所 示 ， 但 不 包括 零 宽 空 格 


(U+200B、U+200C、U+200D) 、 固 宽 空 格 (全 角 U+3000、 
U+2003， 半 角 U+2000、U+2002) 以 及 罕 空 格 (U+ 2009) 。 


我 有 宇 格 ， 我 eons 


图 8-35 word-spacing 作 用 效果 示意 


另外 ， 在 命名 上 ，word-spacing 之 所 以 称 为 word-spacing 而 
不 是 blank-spacing 之 类 的 ， 主 要 原因 是 此 属性 当初 主要 为 英文 类 
排版 设计 ， 而 英文 单词 和 单词 之 间 是 以 空格 分 隔 的 ， 要 想 控制 单词 之 
间 的 间距 ， 自 然 就 向“ 空格 * 开 刀 了 。 


word-spacing 作 用 于 空格 的 特性 可 以 让 我 们 使 用 一 些 人 简单 的 方 
式 进行 一 些 布局 控制 。 例 如 ， 弹 框 底部 有 时 候 是 一 个 “确认 ”按钮 ， 有 
时 候 “ 确 认 ” 和 “取消 ”按钮 同时 存在 ， 而 且 按 钮 有 时 候 居 中 对 齐 ， 有 时 
候 居 右 对 齐 ， 请 问 : 如 何 设置 CSS， 让 多 按钮 的 时 候 中 间 自 动 有 合适 
的 间距 呢 ? 


如 果 按 钮 仅仅 是 居中 对 齐 ， 我 们 可 以 写 : 


button { 
margin: © 10px; 
} 


但 这 里 要 同时 满足 居中 对 齐 和 届 右 对 齐 ， 束 需要 采用 别 的 方法 了 。 一 
种 方法 就 是 使 用 word- spacing: 


.box { 
word-spacing: 20px; 
} 


两 个 按钮 距离 目 动 分 开 。 在 IE6 时 代 ， 这 确实 是 个 非常 好 的 方法 ， 但 如 
今 下 面 的 做 法 可 能 要 更 合适 些 : 


button + button { 
margin-left: 20px; 
} 


与 word-spacing 相 比 ， 这 样 做 的 优势 在 于 ， 如 果 两 个 <button> 标 
签 之 间 没 有 空格 或 者 换行 ， 样 式 依然 有 效 。 


8.6.4 ” 了解 word -break 和 word-wrap 的 区 别 


准确 来 讲 ， 本 节 内 容 应 该 是 上 了 解 word-break:break-al1 和 
word-wrap:break- word 的 区 别 ”， 但 这 样 太 长 了 ， 所 以 标题 只 露 
出 了 属性 值 。 


首先 了 解 一 下 word-break 属 性 ， 语 法 如 下 : 


word-break: normal 
word-break: break-all; 


word-break: keep-all; 


其 中 的 几 个 关键 字 值 的 含义 具体 解释 如 下 。 


。normal: 使 用 默认 的 换行 规则 。 

。break-all: 允许 任意 非 CJK (Chinese/Japanese/Korean) 文本 间 
的 单词 断 行 。 

。 keep-al1: 不 允许 CJK 文 本 中 的 单词 换行 ， 只 能 在 半角 空格 或 
连 字 符 处 换行 。 非 CJK 文 本 的 行为 实际 上 和 normal 一 致 。 


break-al1 这 个 值 所 有 浏览 器 都 文 持 ， 但 是 keep -al1 束 不 这 样 
了 ， 虽 然 有 一 定 的 发 展 和 进步 ， 但 目前 移动 端 还 不 适合 使 用 word- 
break:keep-all。 


另外 ，Chrome、Safari 以 及 其 他 WebKit 或 Blink 浏 览 姻 还 支持 非 官 
方 标准 的 break -word 值 ， 其 表现 就 和 word-wrap:break-word 一 
样 ， 这 个 知识 了 解 一 下 即 可 。 

现在 轮 到 另外 一 个 主角 一 word-wrap 登 场 了 ， 其 语法 如 下 : 


word-wrap: normal; 
word-wrap: break-word; 


其 中 的 几 个 关键 字 值 的 舍 义 具体 解释 如 下 。 


。normal: 就 是 大 家 平常 见得 最 多 的 正常 的 换行 规则 。 
。break-word: 一 行 单词 中 实在 没有 其 他 靠 谱 的 换行 点 的 时 候 换 
行 。 


word-wrap 属 性 其 实 也 是 很 有 故事 的 ， 它 之 前 由 于 和 word- 
break 长 得 太 像 ， 难 免 会 让 人 记 不 住 或 搞 混 ， 于 是 在 CSS3 规 范 里 ， 这 
个 属性 的 名 称 被 修改 了 ， 叫 作 overflow-wrap。 这 个 新 届 性 名 称 显 
然 语 义 更 准确 ， 也 更 容易 区 别 和 记忆 。 但 是 ， 也 就 Chrome 和 Safari 等 
WebKit 或 Blink 浏 览 器 文 持 这 个 新 属性 。 因 此 ， 虽 然 换 了 个 好 看 好 用 的 
狐 名 字 ， 为 了 兼容 性 ， 目 前 还 是 季 秒 地 使 用 word-wrap 吧 。 


下 面 回 到 重点 : word-break:break-all 和 word- 
wrap:break-word。 首 先 ， 两 者 长 相 神 似 ， 都 有 word， 都 有 


break， 位 置 都 还 一 样 ， 一 个 有 两 个 break， 一 个 有 两 个 word; 其 
次 ， 两 者 的 功能 作用 也 类 似 ， 这 两 个 声明 都 能 使 连续 英文 字符 换行 ， 
那么 它们 的 区 别 到 底 是 什么 ? 


那 两 者 的 区 别 是 什么 呢 ? 


用 实例 说 话 ， 手 动 输入 http:/demo.cssworld.cn/8/6-5.php 或 者 扫 下 
面 的 二 维 码 。 对 比 效 采 如 图 8-36 所 示 。 


word-break:break-all 
如 果 您 在 阅读 过 程 中 有 任何 疑问 或 者 点 现 替 述 不 
严 j 诸 的 地 方 ， 欢 迎 去 官方 论坛 http://bbs.cssSwWor 


ld.cn 进 行 反 饶 与 交流 。 


近 了 
word-wrap: break-word; 了 自 


严谨 的 地 方 ， 欢 迎 去 官方 论坛 
http://bbs.cssworld.cn 进 行 反 馈 与 交流 。 


图 8-36 ”word-break:break-all 和 word-wrap:break-word 效 果 区 别 


顾名思义 ，word-break:break-all 的 作用 是 所 有 的 都 换行 ， 
毫 不 留情 ， 一 点 儿 空 际 都 不 放 过 ， 而 word-wrap :break-word 则 带 
有 怜 峭 之 心 ， 如 果 这 一 行文 字 有 可 以 换行 的 点 ， 如 空格 或 CJK (中 文 / 
日 文 /韩文 ) 之 类 的 ， 就 不 打 英 文 单 词 或 字符 的 主意 了 ， 在 这 些 换行 点 
换行 ， 至 于 对 不 对 齐 、 好 不 好 看 则 不 关心 ， 因 此 ， 很 容易 出 现 一 片 一 
片 空白 区 域 的 情况 。 


这 束 是 这 两 个 声明 的 区 别 所 在 。 
8.6.5 white-space 与 换行 和 空格 的 控制 
1. white-space 的 处 理 模 型 


white-space 属 性 声明 了 如 何 处 理 元 素 内 的 空白 字符 ， 这 类 空 
日 字符 包括 Space (空格 ) 键 、Enter ( 回 车 ) 键 、Tab 〈 制 表 符 ) 键 产 
生 的 空白 。 因 此 ，white-space 可 以 决定 图 文 内 容 是 否 在 一 行 显示 


( 回 车 空格 是 否 生效 ， 是 否 显示 大 段 连 续 空白 (空格 是 否 生 效 ) 
等 。 


其 属性 值 包括 下 面 这 些 。 


normal: 合并 空 晶 字符 和 换行 符 。 

pre: 空 晶 字符 不 合并 ， 并 且 内 容 只 在 有 换行 符 的 地 方 换 行 。 
nowrap: 该 值 和 normal 一 样 会 合并 空 昌 字符， 但 不 允许 文本 环 
统 。 

pre-wrap: 空 日 字符 不 合并 ， 并 且 内 容 只 在 有 换行 符 的 地 方 换 
行 ， 同 时 允许 文本 环绕 。 


。pre-1ine: 合并 空白 字符 ， 但 只 在 有 换行 符 的 地 方 换行 ， 人 允许 
文本 环绕 。 


从 上 面 的 解释 我 们 可 以 看 出 ，white-space 的 功能 分 3 个 维度 ， 
分 别 是 : 是 否 合 并 空白 字符 ， 是 否 合并 换行 符 ， 以 及 文本 是 否 自动 换 
行 。 于 是 我 们 就 可 以 得 到 一 个 更 加 直观 的 功能 表 ， 如 表 8-2 所 示 。 


表 8-2 white-space 不 同属 性 值 功能 示意 
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如 果 合 并 空格 ， 会 让 多 个 空格 变 成 1 个 ， 也 就 是 我 们 平常 看 到 的 效 
有 果 ， 癌 了 10 个 空格 ， 结 果 页 面 就 1 个 空格 。 如 果 合 并 换行 ， 会 把 多 个 
续 换行 合并 成 1 个 ， 并 当 作 1 个 普通 空格 处 理 ， 就 是 键盘 空格 键 区 出 来 
的 那个 空格 。 ,如 果 文本 环绕 一 行文 字 内 容 超 出 容 絮 宽度 时 ， 会 目 动 
从 下 一 行 开始 显示 。 


有 两 个 属性 值 pre-wrap 和 pre-1Line 是 从 IE8 开 始 支 持 的 。 如 果 
大 家 前 端 观察 敏锐 ， 就 会 发 现 很 多 网 站 技术 文革 的 代码 块 显示 区 域 常 
常会 出 现 一 个 长 长 的 水 平 滚动 条 ， 其 实 这 样 体验 一 点 儿 都 不 好 ， 那 为 
何 还 要 这 样 设置 呢 ? 


这 其 实 是 一 个 历史 遗留 问题 ， 以 前 做 网 站 是 需要 兼容 IE6 和 IE7 浏 
览 器 的 ， 而 这 两 个 浏览 器 只 支持 white-space:pre， 而 white- 
space:pre 的 文本 是 不 环绕 的 ， 也 就 是 说 源 代码 如 果 没 有 换行 的 话 ， 
它 会 一 行 显示 到 底 ， 不 得 已 只 能 弄 个 水 平 滚动 条 。 但 是 如 今 ， 显 然 设 
置 white-space:pre-wrap 显 示 代 码 片段 要 更 合适 些 。 


2. white-space 与 最 大 可 用 宽度 


当 white-space 设 置 为 nowrap 的 时 候 ， 元 素 的 宽度 此 时 表现 
为 “最 大 可 用 宽度 ”， 换 行 符 和 一 些 空格 全 部 合并 ， 文 本 一 行 显示 。 


在 实际 Web 开 发 的 时 候 ，white-space 的 应 用 非常 广泛 ， 下 面 举 
几 个 例子 。 


(1) “包含 块 ? 尺 寸 过 小 处 理 。 绝 对 定位 以 及 inline-block 元 
素 都 具有 包 庄 性 ， 当 文本 内 容 宽度 超过 包含 块 宽度 的 时 候 ， 就 会 发 生 
文本 环绕 现象 。 还 记 不 记得 之 前 遇 到 过 的 “一 柱 擎 天 ”的 例子 〈 见 图 8- 
37) ? 可 以 对 其 使 用 white-space:nowrap 声 明 让 其 如 预期 的 那样 


TD 
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图 8-37 ”被 “包含 块 ”限制 的 一 柱 敬 天 效果 


(2) 单行 文字 洪 出 点 点 点 效果 。text-overflow:ellipsis 
文字 内 容 超出 打点 效果 离 不 开 white-space:nowrap 声 明 。 


(3) 水平 列表 切换 效果 。 水 平 列表 切换 是 网 页 中 常见 的 交互 效 
果 ， 如 果 列 表 的 数目 是 不 国定 的 ， 使 用 white-space:nowrap 使 列 
表 一 行 显示 会 是 个 非常 不 错 的 处 理 。CSS 示 意 代 码 如 下 : 


.box { 
width: 300px; 
position: relative; 
overflow: hidden; 


} 
‘box > ul { 


position: absolute; 
white-space: nowrap; 


‘box > ul > 1 
display: inline-block; 


使 用 white-space:nowrap 而 不 是 使 用 一 个 绝对 安全 的 固定 宽 
度 值 的 好 处 在 于 没有 多 余 的 空间 浪费 ， 同 时 通过 一 行 简单 的 
box.clientwidth - box.scrollwidth 代 码 就 可 以 知道 最 大 的 
滚动 宽度 。 


关于 此 应 用 ， 我 专门 做 了 演示 页 面 ， 手 动 输入 
http://demo.cssworld.cn/ 8/6-6.php 或 者 扫 右 侧 的 二 维 码 。 


8.6.6 text-align 与 元 素 对 齐 


常见 的 左 中 右 对 齐 没什么 好 说 的 ， 这 里 只 讲 一 下 text- 
align:justify 两 端 对 齐 。 


因为 CSS 是 母语 为 英语 的 人 发 明 的 ， 所 以 在 早期 的 时 候 ， 对 中 文 
或 其 他 东亚 语言 并 没有 考虑 得 那么 细致 ， 从 text-align:justify 
的 表现 上 就 可 以 客 见 一 班 。 例 如 ， 正 浏览 器 〈 至 少 到 IE11) 到 目前 为 
止 使 用 text-align:justify 都 无 法 让 中 文 两 端 对 齐 ， 而 Chrome、 
Firefox 和 Safari 等 浏览 器 都 是 可 以 的 。 


就 最 终 的 泻 染 表现 来 看 ，Chrome 等 浏览 器 应 该 对 文本 内 容 进 行 了 
算法 区 分 ， 对 CJK 文 本 使 用 了 letter-spacing 间 隔 算 法 ， 而 对 非 
CJK 文 本 使 用 的 是 word-spacing 间 隔 算法 ， 但 正 浏 览 器 则 就 一 个 
word-spacing 间 隅 算法 。 于 是 驶 会 出现 明明 左右 padding 大 小 设置 
一 样 ， 结 果 右 侧 空白 明显 更 大 的 蔓 从 问题 。 例 如; 


.Content { 
padding: 10px 20px; 


D 
可 能 最 后 的 效果 如 图 8-38 所 示 。 


这 是 一 段 临 时 想 出 来 的 文案 ， 其 中 可 能 合 
杂 了 几 个 英文 单词 ， 例 如 CS9， 例 如 内 
等 。 


图 8-38 左右 padding 设 置 大 小 一 致 实际 留 白 不 一 致 示意 


不 过 ， 好 在 E 有 一 个 私有 的 CSS 属 性 text-justify (目前 也 写 
入 规范 草案 了 ) 可 以 实现 中 文 两 端 对 齐 的 。 于 是 ， 通 过 使 用 下 面 的 
CSS 代 码 组 合 就 可 以 实现 全 部 浏 贤 器 都 兼容 的 中 文 两 端 对 齐 效 果 : 


.justify { 
text-align: justify; 


text-justify: inter-ideograph; 


} 


其 中 ， 属 性 值 inter-ideograph 的 字面 意思 是 “国际 象形 文字 ”， 非 
官方 非 标准 ， 可 以 放心 使 用 ， 不 用 担心 以 后 其 他 浏览 磊 也 文 持 之 后 出 
现 新 旧 演 染 不 一 致 的 问题 。 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/8/6-7.php 或 者 扫 下 面 
的 二 维 码 。 实 例 页 面 对 比 效果 如 图 8-39 所 示 。 


居 左 对 齐 


这 是 一 段 临 时 想 出 来 的 文案 ， 其 中 可 能 参 
杂 了 几 个 英文 单词 ， 例 如 CS3 , 例如 几 
等 。 


两 端 对 齐 
这 是 一 段 临 时 想 出 来 的 文宗， 其 中 可 能 参 


杂 了 几 个 英文 单词 ， 例 如 CSS， 例 如 JS 
等 。 


图 8-39 ”下 浏览 器 的 中 文 两 端 对 齐 效 有 果 


text-align:justify 除 了 实现 文本 的 两 端 对 齐 ， 还 可 以 实现 
容错 性 更 强 的 两 端 对 齐 布局 效果 。 


我 们 先 从 简单 的 一 行 排列 说 起 。 例 如 ， 要 实现 如 图 8-40 所 示 的 效 
是 


HTML 结 构 如 下 : 


<ul class="justify"> 
<1i> 


<img Src="1.jpg"> 


<p> 图 标 描述 1</p> 
</1i> 
<]i> 
<img src="1.jpg"> 
<p> 图 标 描述 2</p> 
</1i> 
</ul> 


我 们 可 以 让 <1i> 列 表 ijnline-block 化 ， 然 后 text- 
align:justify 一 步 到 位 即 可 实现 两 端 对 齐 效果 了 1! 例如 : 


.justify { 
text-align: justify; 


} 
, justify JI { 


display: inline-block; 
text-align: center,; 


} 


但 结果 却 不 是 想象 的 那样 ， 而 是 依旧 左 侧 排列 ， 如 图 8-41 所 示 。 为 什 


么 会 这 样 呢 ? 


图 标 撞 述 1 图 标 描述 2 


图 8-40 简单 的 单行 两 端 对 齐 布局 效果 


图 标 撞 述 1 


图 8-41 设置 text-align:justify 依 然 左 对 齐 


那 是 因为 不 足 一 行 。 在 默认 设置 下 ，text-align:justify 要 
想 有 两 端 对 齐 的 效果 ， we 一 是 有 分 隔 点 ， 如 空格 ， 二 是 
要 超过 一 行 ， 此 时 非 最 后 一 行内 容 会 两 端 对 齐 


上 面 的 例子 满足 了 第 一 点 ，<1i> 标 签 中 间 有 换行 符 ， 在 默认 
No 但 是 并 不 满足 第 二 点 ， 内 
容 并 没有 超过 一 行 。 这 就 难 办 了 ， 我 们 的 内 容 是 固定 的 ， 不 可 能 再 加 
一 刘表: 本 


CSS 世 界 中 有 一 个 text-align-1Llast 属 性 ， 可 以 规定 最 后 一 行 
内 联 内 容 的 排列 方式 ， 这 是 从 下 浏览 器 过 来 的 。 例 如 : 


.justify { 


text-align-last: justify; 


相当 于 把 第 二 点 要 求 直 接 给 否决 了 ， 就 古 “ 最 后 一 行 的 对 齐整 古 两 端 对 


齐 ” | 


好 一 个 及 时 雨 ! 然而 可 惜 ，Safari 浏 览 句 ， 包 括 Safari 10， 都 不 文 
持 ， 以 至 于 移动 山 和 桌面 端 都 不 能 使 用 ， 甚 是 遗憾 。 


于 是 ， 我 们 只 能 寻求 更 加 极 客 一 点 的 技术 手段 ， 比 方 说 ， 借 助 伪 
元 素 目 动 补 一 行 。 例如: 


.justify { 
text-align: justify; 


} 
.justify:after { 
content: "",; 


display: inline-table;  /* 也 可 以 是 inline-block */ 
width: 100%; 
} 


这 相当 于 强制 创建 一 个 “看 不 见 ” 的 元 素 ， 满 足 换 行 这 个 要 求 ， 实 现 第 
一 行 的 两 端 对 齐 效果 。 从 效果 上 看 ， 确 实 两 端 对 齐 了 ， 然 而 ， 列 表 下 
方 似乎 莫名 多 了 一 些 高 度 ， 如 图 8-42 所 示 。 


图 标 摘 述 1 图 标 描述 2 


图 8-42 ”两 端 对 齐 ， 但 底部 有 莫名 高 度 


天 于 这 个 英名 高 度 如 何 产 生 可 以 参见 4.3 节 ， 其 中 也 提供 了 修正 手 
段 ,分 为 两 点 : 一 是 容器 设置 font - size:0， 列 表 font-Ssize 再 
还 原 ; 二 是 辅助 两 端 对 齐 的 内 联 元 素 设 置 vertical-align:top 或 
vertical-align:bottom。 例 如: 


, justify { 
text-align: justify 
font-size: 0O; 

} 

,justify:after { 
content: "™",; 
display: inline-table; 
width: 100%; 
vertical-align: bottom; 


} 

,justify 1i { 
display: inline-block; 
font-size: 14px; 


} 


理论 很 完美 ， 现 实 很 残酷 。 在 正 浏 览 器 下 ， 如 果 font -size 设 为 
090， 其 样式 表现 就 好 像 空格 根本 不 存在 一 样 ， 无 法 两 端 对 齐 。 是 不 是 
再 次 失望 了 ? 后 来 ， 我 经 过 尝试 发 现 ， 我 们 可 以 设置 font - 
size: .1px， 设 置 字号 0.1 像 素 ，IE 浏 览 器 又 认为 空格 存在 了 ， 同 时 
间隙 什么 的 都 没有 了 ， 美 哉 ! 然而 ，Chrome 浏 览 器 桌面 浏览 器 有 一 个 
最 小 12px 的 font -size 限 制 ， 设 置 字号 0.1 像 素 等 同 于 设置 字号 
12px， 此 时 Chrome 浏 览 器 间 际 问题 又 出 现 了 ! 是 不 是 彻底 绝望 了 ? 


于 是 ， 我 不 得 已 使 用 了 下 面 这 种 比较 极 客 的 方法 进行 处 理 : 


.justify { 
text-align: justify; 


font-size: .1px; 
font-size: -webkit-calc(Opx + QOpx); 


于 是 ， 丝 大 欢喜 。 上 面 的 font -size 处 理 就 是 莫名 高 度 修复 的 关键 技 
巧 所 在 。 


关于 上 面 的 两 端 对 齐 案 例 ， 可 以 手动 输入 
http://demo.cssworld.cn/8/ 6-8.php 或 者 扫 右 侧 的 二 维 码 进行 体验 。 


另外 多 说 一 句 ， 如 果 1line-height 设 置 的 是 固定 值 ， 如 1ine- 


height: 20px， 则 容器 
对 计算 的 值 。 


下 面 有 另外 一 个 问题 


也 不 可 能 只 有 2 列 ， 如 果 还 是 使 用 上 面 的 伪 元 素 填 充 法 ， 可 外 


图 8-43 所 示 的 布局 。 


图 标 描述 1 


图 标 描述 2 


需要 同步 设置 1ine-height :0 或 者 改 为 相 


， 吕 是 我 们 的 列表 排版 不 可 能 总 是 只 有 1 
融会 出 现 


图 标 泣 述 ] 图 标 描述 2 


图 标 描述 1 


图 8-43 ”最 后 一 行 尴 座 地 两 端 对 齐 


这 显然 不 是 我 们 想 要 的 效果 ， 我 们 是 布 望 最 后 一 个 列表 跟 在 后 
面 ， 而 不 征 跑 到 最 右边 。 过 到 这 种 情况 ， 我 们 可 以 使 用 辅助 列表 占 位 
来 实现 想到 的 效果 ，HTML 代 码 如 下 : 


<ul class="justify"> 
<1i><img src="1.jpg"><p> 描 述 1</p></1i> 
<1i><img src="2.jpg"><p> 描 述 2</p></1i> 
<1i><img src="3.jpg"><p> 描 述 3</p></1i> 
<1i><img src="4.jpg"><p> 描 述 4</p></1i> 


<1i><img src="5.jpg"><p> 描 述 5</p></1i> 
<]li class="placeholder"></1i> 
<]li class="placeholder"></1i> 
<]li class="placeholder"></1i> 
</ul> 


最 后 3 个 类 名 为 placeholder 的 <1i> 标 签 就 是 布局 辅助 元 素 。 假 设 我 
们 列表 宽度 是 128px， 则 如 下 设置 即 可 : 


.placeholder { 
display: inline-block; 
width: 128px; 
vertical-align: bottom; 


} 


其 作用 和 使 用 伪 元 素 创建 一 个 宽度 100% 的 内 联 块 级 元 素 是 一 样 的 ， 也 
同样 会 存在 有 额外 高 度 问 题 ， 处 理 方法 一 模 一 样 ， 不 再 资 述 。 最 后 补 
充 儿 局 。 


(1) 关于 占 位 标签 的 个 数 。 占 位 标签 的 个 数 和 列表 的 列 数 保持 一 
样 就 可 以 了 ，106% 实 现 符合 预期 的 布局 效果 ， 多 了 浪费 ， 少 了 不 行 。 


(2) 关于 使 用 空 标签 心理 障碍 。 有 人 对 代码 有 滞 乌 ,原本 规整 的 
列表 最 后 加 几 个 空 标签 ， 心 里 难受 。 这 种 心理 往往 出 现在 新 人 吴 上 ， 
本 质 上 有 是 因 为 关注 点 是 代码 目 身 ， 而 不 是 产品 、 同 事 或 公司 更 高 层面 


的 东西 。 于 是 ， 当 产品 经 理 提 需求 时 ， 他 们 想到 的 是 我 的 代码 如 何如 
何 ， 而 不 是 产品 收益 如 何如 何 。 毕 竟 我 们 是 职场 人 ， 很 显然 ， 创 造 收 
益 和 价值 的 意识 要 远 比 代码 洁癖 心理 对 职业 生涯 发 展 帮助 更 大 。 回 到 
我 们 这 里 ， 代 码 排版 确实 不 美 了 ， 但 是 功能 很 好 地 实现 了 ， 且 非常 健 
壮 ， 容 错 性 强 ， 而 且 对 SEO 没有 任何 干扰 ， 对 辅助 设备 访问 也 没有 任 
何 干扰 ， 百 益 无 一 害 ， 有 什么 好 难受 的 呢 ! 


8.6.7 ”如 何 解 决 text -decoration 下 划 线 和 文本 重 释 的 问题 


CSS 的 text-decoration:underline 可 以 给 内 联 文 本 增加 下 
划 线 ， 但 是 ， 如 果 对 细 市 要 求 较 高 ， 就 会 发 现 ， 下 划 线 经 常会 和 中 文 
文字 的 下 边缘 粘连 在 一 起 (如 图 8-44 所 示 ) ， 英 文 的 话 甚至 直接 穿 
过 ， 越 看 越 有 心痛 的 感觉 。 


图 8-44 中 儿 个 中 文字 下 边缘 正好 都 是 横 线 ， 绪 采 可 以 看 到 ， 文 字 
下 边缘 和 下 划 线 基本 上 合 在 一 起 ， 分 不 清 谁 是 谁 了 ， 换 成 微软 雅 黑子 
体 则 似乎 变本加厉 了 ， 如 图 8-45 所 示 。 
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图 8-44 下划线 和 文字 合 在 一 起 


图 8-45 ”采用 微软 雅 黑 字体 时 文字 和 下 划 线 重 彼 


有 没有 什么 办 法 让 下 划 线 不 要 靠 得 这 么 近 ， 或 者 文字 可 以 完整 、 
清晰 地 显示 呢 ? 有 。 方 法 很 多 ， 例 如 ， 浏 咒 器 支持 并 不 好 的 text- 


decoration-skip 属 性 、CSS3 box-shadow 或 者 background- 
image 模 拟 ， 甚 至 可 以 走 canvas 和 SVG 滤 镜 。 人 然而， 这 些 看 上 去 很 历 
害 的 技巧 其 实 华而不实 。 转 一 圈 后 你 会 发 现 ， 最 好 的 处 理 方法 束 是 使 
用 看 似 普 通 却 功勋 卓越 的 border 属 性 。 例 如 : 

a lt 


text-decoration: none; 


border-bottom: 1px solid; 


效果 如 图 8-46 所 示 。 


有 人 可 能 会 担心 : 这 里 增加 了 下 边框 ， 会 不 会 增加 高 度 、 影 响 水 
平 对 齐 呢 ? 完全 不 用 担心 ， 对 于 纯 内 联 元 素 ， 垂 直方 向 的 padding 属 
性 和 border 属 性 对 原来 的 布局 定位 等 没有 任何 影响 。 也 束 是 说 ， 怠 
算 border -bottom 宽 度 设 为 700px， 上 下 行文 字 的 垂直 位 置 依旧 纹 
丝 不 动 。 再 加 上 border 兼 容 性 很 好 ， 天 然 使 用 color 颜 色 作为 边框 
色 ， 可 谓 下 划 线 重 琶 问题 解决 办 法 的 不 二 之 选 。 另 外 ， 配 合 
padding， 我 们 就 可 以 很 有 效 地 调 市 下 边框 和 文字 下 边缘 的 距离 ， 实 
现 我 们 最 想 要 的 效果 。 使 用 类 似 下 面 的 CSS 代 码 : 


a lt 
text-decoration: none; 
border-bottom: 1px solid; 


padding-bottom: Spx; 


效果 如 图 8-47 所 示 。 


我 是 一 段 文字 ， 链 接地 址 出 现下 划 线 。 


图 8-46 下 边框 模拟 的 下 划 线 


我 是 一 段 义 字 ， 链 接地 址 出 现下 划 线 。 


图 8-47 padding border 配 合 的 下 划 线 效果 


男 外 ， 使 用 border -bottom 模 拟 下 划 线 的 时 候 ，border- 
color 最 好 省 略 ， 这 样 束 会 使 用 文字 的 color 颜 色 作 为 边框 色 ， 思 标 
hover 的 时 候 ， 下 划 线 会 目 动 和 文字 一 起 变色 ， 戏 采 如 图 8-48 所 示 。 


使 用 border -bottom 模 拟 的 另外 一 个 好 处 束 是 ， 我 们 还 可 以 使 
用 虚线 或 者 点 线 下 划 线 ， 如 图 8-49 所 示 。 


我 是 一 段 文字 ， 链 接地 址 出 现下 划 线 。 


图 8-48 ”border 模 拟 下 划 线 ，hover 颜 色 跟着 变化 效果 


我 是 一 段 广 字 ， 链 接地 址 出 现下 划 线 。 


图 8-49 ” border 模拟 下 划 线 使 用 点 线 下 划 线 效果 


text-decoration 除 了 文 持 下 划 线 underline， 还 文 持 上 划 线 
overline 和 中 划 线 line-through。 其 中 ， 上 划 线 我 没有 在 实际 项 
目 中 有 使 用 过 ， 但 是 中 划 线 却 比 较 常 见 ， 用 来 表示 “删除 ”>，<del> 标 
俭 默认 的 text -decoration 的 属性 值 丈 是 Line-through， 因 此 类 
似 原价 删除 效果 ， 如 图 8-50 所 示 。 直 接 价格 外 面 套 一 个 <de1L> 标 签 即 
可 ， 既 样式 天 然 ， 又 易于 兼容 ， 没 有 任何 理由 使 用 <span>、<em> 之 
类 标签 ， 然 后 再 额外 设置 text-decoration: line-through。 
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图 8-50 ”原价 删除 效果 


text-decoration 还 支持 同时 设置 多 个 属性 。 例 如 ， 上 划 线 和 
下 划 线 同时 出 现 : 


at 
text-decoration: underline overline; 
} 


text-decoration 是 CSS 世 界 中 为 数 不 多 支持 多 属性 值 的 属 
性 ， 然 而 在 实际 开发 中 鲜 有 出 场 的 机 会 ， 尤 其 如 今 设 计 风 格 遍 平 色 
块 ， 下 划 线 出 场 的 机 会 也 越 来 越 少 了 。 


在 CSS3 新 世界 中 ，text-decoration 还 可 以 是 波浪 下 划 线 ， 世 
可 以 指定 下 划 线 颜色 等 ， 但 也 不 知道 等 到 了 浏览 器 全 兼容 的 时 代 ， 
text-decoration 还 有 没有 出 场 的 机 会 。 


总 之 ， 感 觉 text -decoration 是 个 越 往 后 越 悲 苦 的 角色 。 
8.6.8 ”一 本 万 利 的 text -transform 字 符 大 小 写 


text-transform 也 是 为 英文 字符 设计 的 ， 要 么 全 大 写 text- 
transform:uppercase， 要 么 全 小 写 text - 
transform:lowercase， 似乎 没什么 值得 控 据 的 ， 但 有 一 些 场景 使 
用 它 却 会 有 一 本 万 利 的 效果 。 


1. 场景 一 ， 身份 证 输入 


我 国 的 吴 份 证 最 后 一 位 有 可 能 是 字母 X， 且 各 种 场合 都 是 指定 必 
须 大 写 。 如 采 我 们 给 输入 映 份 证 的 <input> 输 入 框 设 置 : 


input { 
text-transform: uppercase; 
} 


那么 就 算 我 们 敲 进去 的 是 小 写 x， 出 现 的 也 是 大 写 的 X 模 样 ， 己 不 其 
| 


2. 场景 二 : 验证 码 输入 


图 8-51 给 出 的 是 某 网 站 的 验证 码 。 这 个 验证 码 实 际 上 十 不 区 分 大 
小 写 的 ， 然 而 ， 当 用 户 在 输入 框 输入 小 写 内 容 的 时 候 ， 内 心 实际 上 是 
悄悄 不 安 的 : 会 不 会 区 分 大 小 写 啊 ?以 至 于 写 验 证 码 的 时 候 同 时 按 下 
Shift 刍 以 保证 输入 的 字符 与 样 例 一 模 一 样 ， 我 按 了 Shift 刍 好 多 年 才 发 
现 不 用 区 分 大 小 写 。 设 想 一 下 ， 如 琳 这 里 有 下 面 这 样 的 设置 : 


Imf3 下 其 F3: 


图 8-51 ”验证 码 和 验证 码 输入 效果 


input { 
text-transform: uppercase; 
} 


用 户 屋 司 不 安 的 小 心思 根本 就 不 会 出 现 ， 因 为 用 户 输入 小 写字 母 的 时 
候 ， 输 入 框 里 面 出 现 的 就 是 和 验证 码 一 样 的 大 写 内 容 。 


杀 目 感受 一 下 吧 ， 手 动 输入 http:/demo.cssworld.cn/8/6-9.php 或 者 
扫 右 侧 的 二 维 码 。 


8.7 了 解 :first-letter/:first-1line 念 
元 素 
8.7.1 深入 :first-letter 伪 元 素 及 其 实例 


很 多 年 前 ，Chrome 浏 览 器 和 IE9 浏 览 器 还 未 出 现 ， 那 时 候 first- 
letter 叫 伪 类 选择 器 ， 写 法 是 前 面 加 一 个 冒号 ， 如 :first- 
letter。 那 时 候 的 语义 要 更 直上 日 一 些 ， 选 择 第 一 个 字符 ， 然 后 设置 
一 些 样 式 。 后 来 ， 伪 类 和 伪 元 素 补 划分 得 更 加 明确 和 规 邯 
了 ，:3:after、: :before、: :backdrop、: :first- 
letter、::first-line、::selection 等 是 伪 元 
素 ，:active、:focus、:checked 等 被 称 为 伪 类 ， 这 就 导 
致 : :first-letter 的 语义 发 生 了 一 些 变 化 一 一 首 字 符 作为 元 素 的 假 
想 子 元 素 。 


“假想 子 元 素 "， 听 上 去 有 些 故 弄 玄 虚 的 感觉 ， 实 际 并 不 是 ， 以 这 
种 更 加 直 日 通俗 的 方式 解析 才 更 容易 理解 下 面 的 很 多 现象 。 


1. : :first-letter 伪 元 素 生效 的 前 提 


要 想 让 : :first-letter(:first-letter ) 伪 元 素 生 效 ， 是 需 
要 满足 一 定 条 件 的 ， 而 且 条 件 乍 一 看 还 挺 苛刻 。 


首先 ， 元 素 的 display 计 算 值 必须 是 block、in1line- 
block、1ist-item、table- cell 或 者 table-caption， 其 他 
所 有 display 计 算 值 都 没有 用 ， 包 括 display :table 和 


display:flex 等 。 


此 外 ， 不 是 所 有 的 字符 都 能 单独 作为 : :first-letter 伪 元 素 存 
在 的 。 什 么 意思 呢 ? 我 们 看 一 个 简单 的 例子 ，CSS 和 HTML 代 码 如 
下 


p:first-letter { color: silver; } 


按照 我 们 的 认 知 ， 第 一 个 问号 应 该 是 银色 的 ， 但 实际 上 ， 全 部 都 
征 默 认 的 黑色 ， 效 打 如 图 8-52 所 示 。 


ay i i ds sy ay py 


图 8-52 ”问号 全 部 默认 黑色 


为 什么 呢 ? 这 是 因为 常见 的 标点 符号 、 各 类 括号 和 引号 
在 : :first-letter 伪 元 素 眼中 全 部 都 是 “辅助 类 ”字符 ， 有 点 儿 买 东 
西 送 赠品 的 感觉 ， 但 是 赠品 本 喘 却 不 能 购买 ， 这 里 的 问号 “? ”就 属 于 
赠品 。 有 些 不 理解 ? 看 一 个 例子 束 知 道 了 。 假 如 我 们 在 上 面 的 HTML 


中 一 堆 问号 后 面 写 上 一 些 内 容 字 符 ， 比 方 说 中 文 “ 辅 助 "二 字 ， 结 果 效 
果 如 图 8-53 所 示 。 


助 


图 8-53 ”全 部 问号 和 “ 辅 * 字 变 成 银色 


“? ? ? ?? ?? 辅 * 全 部 都 成 银色 了 ! 还 挺 有 个 性 的 ， 要 人 么 不 变 
色 ， 要 变 束 一 大 波 一 起 变 。 原 因 很 简单 ,，“ 辅 助 ” 二 字 才 是 : :first- 
letter 伪 元 素 真 正 要 收入 时 中 作为 “ 伪 元 素 ”* 的 字符 ， 但 是 现在 前 面 出 
现 了 一 堆 它 不 感 兴趣 的 问号 ， 怎 么 办 呢 ? 那 就 当 作 赠 品 一 并 收 了 ， 于 

”一 大 波 字符 全 都 成 银色 了 。 如果 全 是 问号 ， 因 为 没有 主 商 品 ， 自 
ns 所 以 : :first-letter 没 有 选择 任何 字符 ， 问 
号 全 部 默认 是 黑色 。 


有 人 可 能 会 有 疑问 : 那 到 展 哪 些 字 符 属 于 “赠品 ”， 哪 些 属于 “ 商 
品 ” 呢 ?我 特意 做 了 测试 ， 总 结 下 来 就 是 , “赠品 字符 ”包括 .@f6&*( ) 
() [] @ {}:: Was > 人 o 9 211 .x、/N。 


正常 情况 下 可 以 直接 作为 伪 元 素 的 字符 就 古 数 子 、 英 文字 母 、 中 
文 、$、 一 些 运 算 人 符 ， 以 及 非常 容易 被 名 视 的 空格 等 。 这 里 的 “空格 ”有 
必要 再 加 粗 强 调 一 下 ， 因 为 它 的 确 是 很 容易 被 忽 视 的 一 个 子 符 。 


最 后 说 明 一 点 ， 字 符 前 面 不 能 有 图 片 或 者 jnline- 
block/inline-table 之 类 的 元 素 存 在 。 例 如 ， 下 面 的 HTML 和 CSS 
代码 : 


p:first-letter { color: silver; } 


<p><i style="display:inline-block"></i> 银 


结果 “银色 ”两 字 的 闫 色 还 是 黑色 ， 如 图 8-54 所 示 。 这 惑 是 因为 多 了 一 
个 display 值 是 jnline-block 尺 寸 为 0 的 <i> 元 素 ， 导 
致 ; :first-letter 伪 元 素 直 接 不 起 作用 了 。 


一 般 来 讲 ，: :before 仿 元素 和 普通 元 素 之 间 没 有 多 少 瓜葛 ， 例 
如 :first-child 和 :empty 之 类 的 选择 絮 都 不 受 影响 但是， 由 
于 : :first-letter 和 : :before 一 样 也 是 伪 元 素 ,“ 暗 生 情 情 ” 也 是 
难免 的 。 翻 译 成 CSS 世 界 的 术语 就 是 ，: :before 伪 元 素 也 参 
与 :first-letter 伪 元 杂 。 例 如 ， 如 下 CSS 和 HTML 代 码 : 


p:before { 
content: 新闻: '; 


提 


} 
p:first-letter { 


color: silver; 


} 


<p> 这 是 新 闻 的 标题 ….</p> 


结果 “新 ” 变 成 了 银色 ， 如 图 8-55 所 示 。 包 括 IE8 在 内 的 浏览 器 都 是 这 样 
的 表现 。 


银色 


图 8-54 ”inline-block 元 素 让 :first-letter 无 效 


轩 : 这 是 新 闻 的 标题 ….… 


图 8-55 ”:before 伪 元 素 的 首 字符 变 成 银色 效果 


2. ::first-letter 伪 元 素 可 以 生效 的 CSS 属 性 


如 果 字 符 被 选 作 了 : :first-letter 伪 元 素 ， 并 不 是 
像 : :before 伪 元 素 那 样 ， 几 乎 所 有 CSS 都 有 效 ， 只 是 一 部 分 有 效 。 


。 所 有 字体 相关 属性 : font、font-style、font-variant、 
font-weight 、font-size、line-height 和 font- 
family° 

所 有 背景 相关 属性 : background-color、background- 


Image、background- position、 background-repeat、 


background-size 和 background-attachment。 


所 有 margin 相 关 属 性 : margin、margin-top、margin- 


right、margin-bottom 和 margin-lLeft。 
。 所 有 padding 相 关 属 性 : padding、padding-top、 
padding-right 、padding- bottom 和 padding-1Left。 
所 有 border 相 关 属 性 : 缩写 的 border 、border-style、 
border-color、border-width 和 普通 书写 的 属性 。 
color 属 性 。 


。 text-decoration、 text-transform、 letter- 
spacing、word-spacing (合适 情境 下 ) 、line-height、 
float 和 vertical-align (只 有 当 float 为 none 的 时 候 ) 等 
属性 。 


因此 ， 如 果 亡 图 使 用 visibility:hidden 或 者 display :none 
隐藏 : :first- letter 伪 元 素 ， 还 是 省 省 吧 。 


3. : :first-letter 伪 元 素 的 一 些 有 意思 的 特点 


(1) 支持 部 分 display 属性 值 标签 仍 套 。: :first-letter 念 
元 素 获 取 可 以 跨 标签 ， 也 就 是 不 仅 能 选择 匿名 内 联 盒子 ， 还 能 透 过 层 
层 标 签 进行 选择 ， 但 是 也 有 一 些 限制 ， 并 不 是 所 有 标签 舱 套 都 是 有 用 
的 。 


display 值 如 果 是 inline、block、table、table-row、 
table-caption、table- cell1、1list-item 都 是 可 以 的 ， 但 是 
不 能 是 ijnline-block 和 inline- table， 奉 则 : :first-letter 
伪 元 素 会 直接 无 效 ， 而 display :flex 则 改变 了 规则 ， 直 接 选 择 了 下 
一 行 的 字符 内 容 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/7-1.php 或 者 扫 右 侧 
的 二 维 人 码 。 


例如 : 


p:first-letter { 
color: silver; 


} 
p > span { 
display: table; 


<p><span> 第 一 个 </span> 字 符 看 看 全 


结果 如 图 8-56 所 示 ,“ 第 ” 字 变 成 银色 了 (为 了 打印 对 比 明显 ， 没 有 使 
用 演示 页 面 的 红色 ) 。 


请 选择 display 的 属性 值 :table 。 "| 


字符 青 看 会 不 会 变色 ? 


图 8-56 “第 ” 变 成 银色 验证 了 table 类 型 髓 套 有 效 


这 种 航 套 关系 支持 多 层 藤 套 ， 即 连续 套 4~5 层 inline 水 平 的 标 
签 和 没有 任何 标签 散人 套 的 效果 是 一 样 的 。 


(2) 颜色 等 权重 总 是 多 了 一 层 。 这 是 非常 容易 犯 的 一 个 错误 ， 也 
征 CSS 世 界 十 大 不 易 理解 问题 之 一 。 例 如 ， 下 面 这 个 问题 是 某 同 行 发 
邮件 问 我 的 ， 我 滴 单 编辑 了 一 下 : 


p:first-letter { 
color: red; 
} 


p > span { 


color: blue!important; 


} 


<p><span> 第 一 个 </span> 字 符 看 看 会 不 会 变 红 “ 


请 问 “ 第 ”这 个 字符 的 颜色 是 什么 ? 


基本 上 ， 超 过 95% 的 前 端 人 员 会 认为 是 pbLlue， 因 为 大 家 都 是 从 
CSS 选 择 器 权重 的 角度 去 考虑 的 。 这 个 答案 本 身 没 问题 ， 但 是 却 忽 略 
了 很 重要 的 一 点 ，: :first-letter 伪 元 素 其 实 是 作为 子 元 素 存 在 
的 ， 或 者 说 应 当 看 出 是 子 元 素 ， 于 是 就 很 好 理解 了 。 对 于 类 似 color 
这 样 的 继承 属性 ， 子 元 素 的 CSS 设 置 一 定 比 父 元 素 的 级 别 要 高 ， 哪 怕 
父 级 使 用 了 重量 级 的 !important ， 因 为 子 元 素 会 先 继承 ， 然 后 再 应 
用 自身 设置 。 因 此 ， 上 面 CSS 和 HTML 代 码 的 最 终结 果 是 ， 第 一 个 字 
符 “ 第 ” 字 的 颜色 是 red， 红 色 ! 


这 就 是 : :first-letter 伪 元 素 的 另外 一 个 重要 特性 
权重 总 是 多 了 一 层 。 


颜色 等 


4. : :first-letter 实 际 应 用 举例 


电 商 产品 经 常会 有 价格 ， 价 格 前 面 一 般 都 有 一 个 # 符 号 ， 这 个 符 
号 字体 往往 会 比较 特殊 ， 字 号 也 比较 大 ， 同 时 和 文字 的 数值 有 几 像 素 
的 距离 。 要 实现 这 样 的 效果 ， 通 常 的 做 法 是 在 ¥ 符 号 外 面包 一 个 span 
标签 ， 命 名 一 个 类 名 ， 然 后 通过 CSS 控 制 。 实 际 上 ， 还 有 更 简单 巧妙 
的 方法 ， 束 是 使 用 本 文 介绍 的 : :first-letter 伪 元 素 。 


CSS 示 例 代码 如 下 : 


.price:first-letter { 
margin-right: Spx; 
font-size: xx-large; 


vertical-align: -2px; 


于 是 ， 我 们 的 HTML 就 可 以 很 简洁 : 


¥ 并 不 是 “赠品 字符 ”， 因 此 这 里 可 行 ， 最 后 效果 如 图 8-57 所 示 。 
半 3o 
图 8-57 ¥ 在 使 用 : :first-letter 控 制 后 的 效果 
8.7.2 ”故事 相对 较 少 的 : first -1line 伪 元 素 


:first-line 和 :first-letter 像 是 对 表 兄 弟 ， 所 谓 “ 不 是 一 
家 人 不 进 一 家 门 >， 它 们 长 得 类 似 ， 很 多 特性 也 类 似 。 但 是 相 比 之 
下 ，:first-1ine 的 故事 要 少 一 些 ， 没 有 “赠品 字符 ”之 类 的 梗 存在 。 


。 :first-line 和 :first-letter 伪 元 素 一 样 ，IE9 及 以 上 版 本 
浏览 器 支持 双 冒 号 : :first-1line{} 写 法 ，IE8 浏 览 器 只 认识 单 
冒号 写法 。 

。 :first-line 和 :first-letter 伪 元 素 一 样 ， 只 能 作用 在 块 级 
元 素 上 ， 也 就 是 display 为 block、inline-block、1list- 
item、table-cell 或 者 table- caption 的 元 素 设 
置 :first-1Line 才 有 效 ，tab1le、flex 之 类 都 是 无 效 的 。 

。 :first-Line 和 :first-1letter 伪 元 素 一 样 ， 仅 支持 部 分 CSS 
属性 ， 例 如 : 

o。 所 有 字体 相关 属性 ; 
o color 属 性 ; 
o。 所 有 背景 相关 属性 ; 


o text-decoration、 text-transfor 、letter- 
spacing ~、word-spacing、1line-height 和 vertical- 
align 等 属性 。 

。 :first-line 和 :first-letter 伪 元 素 一 样 ，color 等 继承 属 
性 的 权重 总 是 多 了 一 层 ， 毕 竟 称 为 “ 伪 元 素 *， 束 好 像 里 面 还 有 个 
子 元 素 。 如 果 :first-line 和 :first- letter 同 时 设置 颜 
色 ，:first-letter 级 别 比 :first-line 高 ， 即 使 :first- 
1ine 写 在 后 面 ， 甚 至 加 !important (如 果 浏 览 器 支持 ) 也 是 如 
此 。 

。 :first-line 和 :first-letter 伪 元 素 一 样 ， 也 支持 标签 帜 
套 ， 但 是 具体 细则 和 :first-letter 出 入 较 大 ， 例 如 ， 它 不 支 
持 table 相 天 属性 等 。 


具体 大 家 可 以 亲自 感受 一 下 ， 手 动 输入 http://demo.cssworld.cn/8/7- 
2.php 或 者 扫 右 侧 的 二 维 码 。 


例如 : 


p:first-letter { 
color: silver; 


} 
p > span { 
display: inline-block; 


<p><span> 第 一 行 </span> 字 符 看 看 会 


结果 在 Chrome 浏 贤 郁 下 颜色 居然 断 开 了 ， 如 图 8-58 所 示 。 


请 选择 display 的 属性 值 :|inline-block "| 


第 一 行 


图 8-58 “Chrome 浏览 器 下 in1ine-block 阻 断 :first-1Line 


IE 和 Firefox 都 没有 这 个 问题 ， 文 字 颜 色 都 是 一 样 的 。 因 此 ， 如 果 
想 使 用 :first-1Line， 首 行内 容 不 能 混入 in1Line- 
block/inline-table 元 素 。 


: :first -line 实 际 应 用 举例 


下 面 就 举 一 个 我 在 某 千 万 级 访问 项 目 中 使 用 : :first-1line 的 例 
子 吧 。 大 致 是 这 样 的 :我 希望 网 站 小 标签 、 线 框 按 钮 和 实 色 按钮 全 音 
都 可 以 使 用 color 颜 色 控 制 ， 例 如 : 


<a href class="btn-normal red" role="button"> 红 色 按 钮 </a> 


<a href class="btn-normal blue" role="button"> 蓝 色 按 钮 </a> 
<a href class="btn-normal green" role="button"> 绿 色 按 钮 </a> 


其 中 ，.red、.blue、,green 是 站 点 通用 的 颜色 类 名 。 结 果 我 就 遇 
到 了 难题 ， 当 我 们 使 用 如 下 CSS 代 码 的 时 候 ， 实 色 背 景 按钮 就 会 遇 到 
文字 颜色 和 背景 颜色 一 样 的 问题 ; 


.btn-normal { 
background-color: currentColor; 


因为 变量 currentCcolor 就 是 当前 coLor 的 色 值 。 怎 么 办 呢 ? 考虑 到 


按钮 上 的 文字 都 是 日 色 ， 因 此 我 们 可 以 这 样 处 理 : 


.btn-normal::first-line { 
color: #fff; 


} 


因为 利用 了 : :first-line 伪 元 素 ， 于 是 ,btn-normal 标 签 上 
的 颜色 实际 上 是 设置 给 background-color 的 ， 而 按钮 真正 呈现 的 
颜色 已 经 被 : :first-1line 伪 元 素 牢 牢 设置 好 了 ， 束 完全 不 用 担心 文 
字 颜 色 和 背景 色 混在 一 起 了 。 


大 功 告 成 ! 此 时 ， 如 果 要 痢 增 一 个 黑色 按钮 ， 直 接 用 下 面 的 
HTML 代 码 束 可 以 了 ， 无 须 额外 再 去 写 按钮 相关 的 CSS 代 码 : 


<a href class="btn-normal black" role="button"> 绿 色 按 钮 </a> 


第 9 章 元素 的 装饰 与 美化 


前 面 几 章 介绍 了 与 CSS 世 界 布局 相关 的 内 容 ， 如 果 用 建筑 打 比 方 ， 
就 是 毛坯 房 已 经 建 好 了 ， 理 论 上 可 以 入 住 了 ,但 实际 上 ， 我 们 或 多 或 
少 都 会 对 房间 进行 一 定 的 猴 修 ， 这 个 “ 攻 修 "反映 在 CSS 世 界 中 束 是 “元 
素 的 装饰 和 美化 ”， 如 设置 合适 的 颜色 或 者 增加 合适 的 确 纹 等 。 


9.1 CSS 世界 的 color 很 单调 
9.1.1 少 得 可 怜 的 颜色 关键 字 


这 里 的 “颜色 关键 字 ” 指 的 是 诸如 red、blue 这 些 关 键 字 。 


CSS1 的 时 候 只 文 持 16 个 基本 颜色 关键 字 ， 如 black、white。 为 
什么 数量 这 么 少 呢 ? 我 们 可 以 想 想 当时 的 显示 器 水 平 ， 不 是 黑白 的 已 
经 不 错 了 。 


CSS2 的 时 候 ， 显 然 应 该 要 新 增 一 些 颜 色 关 键 字 。 或 许 很 多 人 满怀 
和 希望， 总 以 为 会 有 什么 惊喜 ， 结 果 果 然 很 惊喜 : 居然 只 加 入 了 一 个 颜 
色 一 一 检 色 orange。 


到 了 CSS3 的 时 候 ， 以 为 又 会 是 “ 雷 声 大 ， 雨 点 小 "， 结 果 这 次 却 出 
人 意料 ， 一 下 子 增加 了 100 多 个 颜色 关键 字 ， 甚 至 连 
mediumturquoise 这 样 的 复杂 得 看 不 懂 也 记 不 住 的 天 键 字 都 出 现 
了 。 这 些 扩展 的 CSS 颜 色 关 键 字 是 有 专门 的 名 称 的 ， 称 为 “X11 颜色 


名 ”， 这 里 的 “X11” 不 是 11 区 的 意思 ， 而 是 指 用 来 显示 位 图 的 X Window 
System， 和 常见 于 类 UNIX 计 算 机 系统 上 。 


到 了 CSS4 的 时 候 ， 以 为 又 会 有 什么 惊人 之 举 ， 结 果 叉 仅 增 加 了 一 
个 颜色 关键 字 一 一 rebeccapurple。 


在 本 书 中 ，CSS 世 界 指 CSS 2.1，CSS 新 世界 指 CSS3，CSS 新 新 世 
界 指 CSS4， 因 此 ，CSS 世 界 中 支持 的 颜色 关键 字 其 实 少 得 可 怜 ， 总 共 
就 17 个 ， 如 图 9-1 所 示 。 其 中 ，gray 和 grey 表 示 的 是 同一 个 颜色 值 。 
如 果 想 了 解 更 多 CSS3 颜 色 关 键 字 ， 可 以 阅读 这 篇 文章 : http:/www. 


zhangxinxu.com/wordpress/?p=4859 ° 


所 有 CSS3 新 增 的 颜色 关键 字 原 生 IE8 浏 览 器 都 是 不 支持 的 。 注 意 ， 

这 里 特意 加 了 “原生 ”二 字 。 我 们 总 是 使 用 下 兼容 模式 去 测试 低 版 本 IE 浏 
览 器 ， 但 不 总 是 准确 的 ， 其 中 之 一 就 是 颜色 。 如 果 你 用 高 版 本 正 浏 览 

希 的 IE8 模 式 去 浏览 ， 会 发 现 CSS3 的 闫 色 值 都 是 可 以 准确 泻 染 的 ， 但 实 
际 上 ， 原 生 IE8 都 不 认识 ， 而 使 用 下 8 的 用 户 几 乎 全 部 都 是 原生 IE8， 
此 要 慎 用 。 不 过 ， 考 虑 到 实际 开发 的 时 候 设计 师 不 可 能 就 使 用 这 些 关 

键 字 对 应 的 颜色 ， 因 此 ， 我 们 没 多 少 机 会 使 用 颜色 关键 字 ， 也 上 自然 很 

难 有 机 会 踩 到 这 个 坑 。 


关键 字 RGB hex 值 “实时 表现 


black #080000 


silver #c8cOce 
gray [] | #38688880 
white #fFfFFFF 
maroon #886006060 

red #ff0000 
purple #800080 


fuchsia | #ff@@ff 


green #8660686060 


#686ff00 

olive 并 38880690 

yellow #ffffOO 

navy #8868868 

bluUe #0000ff 

teal #6080680 

agusa #0O0ffff 

CSS Level 2 (Revision orange #ffa500 


[ww 
[全 
L 


图 9-1 CSS 世界 支持 的 颜色 关键 字 


事情 还 没有 结束 ， 接 下 来 ， 关 于 颜色 名 称 ， 还 有 一 个 很 有 意思 但 
很 多 人 部 不 知道 的 特性 表现 ， 那 束 是 :如 末 浏 览 右 无 法 识别 颜色 关键 
字 ， 那 和 HTML 中 对 颜色 关键 字 的 解析 和 CSS 中 的 会 不 一 样 。 


这 里 有 必要 好 好 解释 一 下 。 大 家 应 该 都 知道 ， 传 统 HTML 的 部 分 属 
性 可 以 直接 支持 color 属 性 ， 例 如 : 


<font color="pink"> 少 女 色 </font> 


同时 ， 我 们 也 可 以 通过 style 属 性 书写 color 声 明 。 例 如 : 


<font style="color:pink;"> 少 女 色 </font> 


如 条 浏 贤 郁 认识 这 
色 ; 但 是 ， 如 采 浏 贤 郁 
表现 会 有 才 异 。 


颜色 关键 子 ， 则 该 什么 颜色 整 显示 什么 颜 
法 


此 
无 法 识别 这 些 闫 色 关 键 字 ， 则 两 种 书写 的 最 终 


在 HIML 中 ， 会 使 用 其 他 算法 将 非 识 别 颜 色 关 键 字 转换 成 太 外 一 个 
让 全 不 同 的 颜色 值 ， 而 在 CSS 中 则 是 直接 使 用 默认 颜色 值 。 


例如 ， 我 们 使 用 CSS4 水 平 的 闫 色 天 键 字 rebeccapurple 做 测 
试 ，HTML 代 码 如 下 : 


<h1 style="color:rebeccapurple;">CSS 色 和 <font 
color="rebeccapurple">HTML 色 </font> 


解析 差异 测试 </h1> 
IE9 浏 览 妖 下 的 结果 如 图 9-2 所 示 。 
CSS 色 和 HTMNU 开 色 人 解析 差异 测试 


图 9-2 ”IE9 浏 览 器 下 “HTML 色 ”显示 为 绿色 


IE11 浏 上 顺 器 下 的 结果 则 如 图 9-3 所 示 。 
CSS 色 和 HTMEL 色 解析 差异 测试 
图 9-3 IE11 浏 览 器 下 所 有 文字 都 是 偏 紫色 的 


9.1.2 不 支持 的 transparent 关 键 字 


transparent 关 键 字 是 一 个 很 有 意思 的 关键 字 ，background- 
color :transparent 包 括 IE6 浏 览 器 都 支持 ，border - 


color :transparent 从 IE7 浏 览 器 开始 支持 ， 但 是 color: 
transparent 却 从 IE9 浏 览 器 才 开 始 支 持 。 


我 确定 color :transparent 原 生 IE8 浏 时 器 不 文 持 ， 会 使 用 默认 
颜色 代替 。 不 要 拿 兼 容 模式 下 的 测试 结果 说 事 儿 ， 那 是 不 准 的 。 高 版 
本 下 浏览 器 下 的 IE8 兼 容 模式 color: transparent 确 实 可 以 让 文字 
透明 ， 但 是 下 8 用 户 都 是 使 用 原生 下 8 的 。 

9.1.3 “不 支持 的 currentCcolor 变 量 


currentColor 变 量 是 个 好 东西 ， 可 以 使 用 当前 coLor 计 算 值 ， 
即 所 谓 颜 色 值 。 但 是 同样 地 ，IE9+ 浏 览 器 才 支 持 它 。 


实际 上 ，CSS 中 很 多 属性 值 默认 就 是 currentColor 的 表现 ， 我 
们 一 般 〈 除 了 部 分 浏览 器 animation 需 要 ) 无 须 画 蛇 添 足 地 再 声明 这 
个 关键 字 。 如 border、text-shadow、box-shadow 等 ， 尤 其 
border， 包 括 IE7 在 内 的 浏览 器 都 是 如 此 特性 。 因 为 我 们 使 用 图 形 生 
成 的 上 时候， 尽量 使 用 border 属 性 ， 所 以 hover 变 色 只 需要 控制 color 值 
就 可 以 了 。 例 如 : 


.test { 
color: red; 


border: 2px solid; 


} 
没有 必要 这 么 使 用 : 


test { 
color: red; 


border: 2px solid currentColor; 


} 


9.1.4 不 支持 的 rgba 颜 色 和 hs1a 颜 色 


CSS 世 界 的 color 属 性 支持 十 六 进 制 颜色 、rgb 颜 色 。 十 六 进 制 颜 
色 指 的 是 长 得 像 #000000 或 #000 这 样 的 颜色 ， 我 们 在 CSS 中 用 得 最 频 
繁 的 就 是 这 种 格式 的 颜色 。 为 什么 呢 ? 因 为 字符 数目 最 少 ， 书 写 更 
快 ， 演 染 性 能 更 高 。 


NS 


rgb 颜色 实际 上 和 十 六 进 制 颜色 是 近亲 ， 都 归属 于 rgb 基色， 只 是 
进 制 有 差异 。rgb 格 式 从 我 入 行 起 浏 贤 絮 束 支 持 了 ， 除 了 支持 数值 闸 
色 ， ee 9，51)， 还 文 持 百 分 比 rgb 颜 色 ， 如 rgb(100%， 
0%， 20%) ， 这 个 很 多 人 应 该 是 不 知道 的 。 


rgb 数值 格式 只 能 生 人 整数 ， 不 能 旦 小 效 ， 否 则 ， 包 括 各 下 以 及 
Chrome 在 内 的 浏 贤 郝 都 会 无 视 它 。 下 面 是 一 些 文 持 和 不 文 择 rgb 数值 
格式 的 示例 : 


/* 下 面 这 些 都 是 同一 个 RGB 颜色 : */ 
#f03 

#FQ3 

#ff0033 

#FF0033 

rgb(255,0,51) 


rgb(255, ©0, 51) 

rgb(255，0，51.2) /* 无 效 ! 整数 ， 不 能 小 数 */ 
rgb(100%, 0%, 20%) 

rgb(100%, QO%, 20%) 
rgb(100%，0，20%) /* 无 效 ! 整数 和 百分比 不 能 在 一 起 使 用 


但 color 属 性 并 不 支持 hsl 颜 色 、rgba 颜 色 和 hsla 闫 色 。 


hsil 闫 色 是 CSS3 才 出 现 的 闫 色 表 现 格式 ，IE9+ 浏 哆 器 才 文 持 。 和 
rgb 分 别 表 示 red、green、blue 一 样 ，hs1 颜 色 的 3 个 字母 也 有 目 己 的 合 


义 。 其 中 ，h 表 示 hue， 是 色调 的 意思 ， 取 值 0 一 360， 大 致 按照 数值 

红 、 楼 、 黄 、 绿 、 青 、 监 、 紫 变化 节奏 ; s 表 示 saturation (饱和 度 ) ， 
用 0 一 100% 表 示 ， 值 越 大 饱和 度 越 高 ， 颜 色 越 亮 ， 通 常 我 们 评价 某 设 
计 “ 亮 瞎 我 们 的 眼 ”， 就 是 < 这 个 设计 颜色 饱和 度 太 高 ”的 另 一 种 说 法 ; 1 
表示 lightness (亮度 ) ， 也 用 0~100% 表 示 ， 值 越 高 颜色 越 亮 ，100% 
就 是 白色 ，509% 则 是 正常 亮度 ，09% 就 是 黑色 。 


在 取 色 万 中 ，hs1 颜 色 非 常 管 用 ， 有 助 于 迅速 选取 我 们 想 要 的 颜色 
值 ， 或 者 根据 现 有 颜色 得 到 近似 色 。 比 方 说 ， 我 们 要 实现 一 个 hover 歼 
条 ，hover 一 个 色 块 ， 然 后 颜色 加 深 ， 怎 么 实现 呢 ? 使 用 rgb 很 不 方 
便 ， 而 使 用 hs1 则 很 简单 ， 我 们 只 要 把 1 《也 束 是 亮度 ) 稍微 调 低 一 点 
儿 束 可 以 了 。 


最 后 ，CSS3 中 的 颜色 支 持 Alpha 静 明 通 道 ， 于 是 就 有 了 rgba 闫 色 
和 hs1a 颜 色 ，a 表 示 透 明度 ， 取 值 在 90 一 1，9 表 示 完 全 透明 ，1 表 示 实 
色 无 透明 。 如 果 使 用 小 数 ， 前 面 的 9 可 以 省 略 ， 能 节约 一 个 字符 大 小 。 


rgba(255,0,0,.7) 
hsla(240,100%, 50%, .7) 


更 深入 、 更 有 趣 的 知识 这 里 就 不 展开 了 。 
9.1.5 “支持 却 鸡肋 的 系统 颜色 
“系统 颜色 ” 指 的 是 什么 呢 ? 


我 们 都 知道 ，Windows 操 作 系 统 的 不 同 主题 的 弹 框 、 工 具 栏 之 类 的 
颜色 部 是 不 一 样 的 ， 这 些 不 一 样 的 颜色 整 称 为 系统 闫 色 。 在 Web 中 ， 我 


们 也 可 以 使 用 这 些 颜 色 ， 我 们 可 以 实现 和 系统 主题 风格 类 似 的 Web 组 件 
皮肤 效 末 。 


那么 ， 都 有 哪些 系统 颜色 关键 字 呢 ? 


下 面 是 我 做 的 一 些 整理 。 注 意 ， 这 些 是 跟着 系统 走 的 ， 不 是 所 有 
的 系统 都 文 持 ， 而 且 有 些 值 是 跟着 浏 贤 器 走 的 ， 在 Chrome 浏 览 右 下 可 
能 是 淡 灰 色 ， 而 在 玉 下 可 能 是 白色 等 ， 如 图 9-4 所 示 (图 截 自 
Chrome) 。 


如 此 上 世纪 风格 的 色 值 表现 和 当下 设计 风格 格格 不 入 ， 加 上 色 值 
跟着 系统 走 ， 最 终 表现 不 可 控 ， 使 得 在 实际 项 目 中 几乎 没有 任何 使 用 
系统 颜色 的 理由 ， 给 人 感觉 比较 鸡肋 。 


ActiveBorder 
激活 态 窗 体 边框 s 


ActiveCaption 
激活 态 窗 体 标题 。 应 
该 使 用 CaptionText 前 景 
色 。 


AppWorkspace 
多 文档 界面 背景 色 。 


Background 
桌面 背景 。 


ButtonFace 

三 维 元 素 的 表面 背景 
色 ， 之 所 以 会 呈现 3D 效 
果 ， 是 由 于 和 周围 有 一 层 
边框 。 应 该 使 用 Button 
Text 的 前 景色 。 


ButtonHighlight 

3D 元 素面 对 光源 的 边框 
色 ， 之 所 以 会 呈现 3D 效 
果 ， 是 由 于 和 周围 有 一 层 
边框 。 


ButtonShadow 

3D 元 素 背 对 光源 的 边框 
色 ， 之 所 以 会 呈现 3D 效 
果 ， 是 由 于 和 周围 有 一 层 
边框 = 


ButtonText 
按 馈 交 本 。 需要 使 用 


ButtonFace 或 ThreeDFace 


背景 色 。 


CaptionText 

标题 文本 ， 尺寸 盒子 ， 
以 及 滚动 条 箭头 意 子 。 
需要 使 用 ActiveCaption 
背景 色 。 


| EE 

| GrayText 

| 灰色 的 (disabled) 文 
| 

| 


bd 


| Highlight 

| 控件 中 被 选中 的 项 。 

| 应 使 用 HighlightText 前 
景色 。 


| HighlightText 

控件 中 被 选中 的 项 的 文 
| 本 。 应 使 用 Highlight 
| 背景 色 。 


| InactiveBorder 


| 非 激活 态 窗 体 迪 框 。 


| InactiveCaption 
| 非 激活 态 窗 体 标题 。 


| 应 使 用 InactiveCaption 


Text 前 景色 。 


InactiveCaptionText | 
| 非 激活 标题 的 文本 颜色 。 


| 应 使 用 InactiveCaption 
| 背景 色 。 


| InfoBackground 
| 提示 框 控件 背景 色 。 
| 应 使 用 InfoText 前 景 


所 


| InfoText 

| 提示 框 控 件 文 本 色 。 

| 应 使 用 InfoBackground 
| 背景 色 © 


| Menu 
| 菜单 背景。 应 使 用 
MenuText 前 景色 。 


| MenuText 


| 菜单 中 的 文本 。 应 使 
| 用 Menu 背 景色 。 


| Scrollbar 
滚动 条 未 色 区 域 。 


ThreeDDarkShadow 
远离 3D 元 素 光源 的 两 个 
边框 中 比较 暗 通 常 为 
外 面 ) 的 那个 颜色 。 
ThreeDFace 

| 3D 元 素 的 表面 背景 
色 。 应 使 用 ButtonText 
| 前 景色 。 


ThreeDHighlight 

| 面 对 3D 元 素 光源 两 个 边 
| 框 高 通常 为 外 面 ) 的 
那 一 个 。 


' ThreeDLightShadow 
面 对 3D 元 素 光源 的 两 个 
边框 中 比较 暗 【 通 常 为 
| 里 面 ) 的 那个 颜色 。 


' ThreeDShadow 

| 远离 3D 元 素 光源 的 两 个 
| 边框 中 比较 高 《通常 为 
| 里 面 ; 的 那个 颜色 。 


本 
Window 


窗 体 背 景 。 应 使 用 
WindowText 前 景色 。 


WindowFrame 
窗 体 框架 。 


| WindowText 
窗 体 中 的 文本 。 应 使 
| 用 Window 背 景色 。 


图 9-4 系统 颜色 关键 字 值 和 示意 


系统 颜色 虽然 又 冷门 又 不 好 看 ， 但 其 实 也 生 可 以 在 实际 项 目 中 有 
所 应 用 的 。 举 两 个 我 目 己 实践 的 案例 : 一 是 在 编辑 需 中 模拟 块 状 内 容 
( 非 图 片 、 非 文字 ) 被 选中 效果 ， 为 了 和 原生 选中 的 效果 一 样 ， 使 用 
了 系统 颜色 ， 以 假 乱 真 ， 看 不 出 是 模 拟 的 ; 二 是 集成 了 众多 模块 的 工 
具 页 面 需要 有 一 个 即时 取 色 配色 功能 ， 主 要 是 给 设计 师 用 的 。 显 然 ， 
传统 的 skin1.css 、skin2.css 预 完全 部 写 好 再 切换 的 方式 古 不 行 的 ， 因 为 
模块 是 分 散 且 独立 的 ， 色 值 是 不 确定 的 ， 也 不 能 说 入 库 走 变量 或 者 运 
行 Node.js 工 具 什 么 的 ， 开 发 和 维护 成 本 都 很 高 ， 因 此 最 好 纯 Web 前 端 
解决 。 可 以 采用 使 用 系统 色 作为 模块 的 CSS 色 值 的 方式 实现 。 其 好 处 在 
于 以 下 两 点 。 


(1) 系统 颜色 本 身 有 颜色 ， 我 们 的 模块 是 可 以 即时 预览 的 ， 双 击 
html 模 块 文件 束 可 以 ， 没 有 任何 其 他 依赖 。 


(2) 系统 闫 色 名 称 都 比较 高 冷 ， 非 常 适合 作为 变量 ， 替 换 时 不 会 
发 生 冲 突 。 


于 是 ， 当 我 们 选取 某 一 颜色 后 ， 只 要 把 所 有 CSS 中 的 系统 颜色 变量 
玲 换 成 选中 的 色 值 ， 任 意 组 闭 的 模块 的 即时 配色 的 效果 谍 实 现 了 。 


9.2 ”CSS 世界 的 background 很 单调 


CSS 世 界 中 的 background 大 部 分 有 意思 的 内 容 都 是 在 CSS3 新 世 
界 中 才 出 现 的 ， 如 Multiple backgrounds 〈 多 背景) 、 


background-size (背景 尺寸 )、background-origin (背景 初 


台 定 位 盒子 ) 、background-c1lip (背景 剪 切 盒子 ) 等 。 


相 比 之 下 ，CSS 世 界 支 持 的 packground 那 点 东西 就 显得 比较 单调 
了 ， 毕 竟 那 个 时 代 以 图 文 展 示 为 主 ， 装 顺和 美化 并 不 是 重点 。 


当 我 们 使 用 background 属 性 的 时 候 ， 实 际 上 使 用 的 是 一 系列 
background 相 天 属性 的 集合 ， 包 括 : 


。 background-image: none 

。 background-position: 09% 0O% 

。 background-repeat: repeat 

。 background-attachment: scroll 


。 background-color: transparent 
如 宁 是 IE9+ 浏 览 右 ， 则 还 包括 : 


。 background-size: auto auto 
。 background-origin: padding-box 
。 background-clip: border-box 
本 书 仅 介 绍 浏览 器 都 支持 的 上 面 5 个 background 相 关 属 性 ， 虽 然 
相 比 之 下 有 些 单调 ， 但 一 些小 故事 还 是 有 的 。 


9.2.1 隐藏 元 素 的 background-image 到 底 加 不 加 载 


隐藏 元 素 的 bpackground- image 到 底 加 不 加 载 呢 ? 想必 这 是 一 个 
很 多 人 都 感 兴趣 的 问题 。 


根据 我 的 测试 ， 一 个 元 素 如 果 displLlay 计 算 值 为 none， 在 正 浏 览 
器 下 《IE8~ 正 11， 更 高 版 本 不 确定 ) 依然 会 发 送 图 片 请 求 ，Firefox 浏 
拓 吉 不 会 ， 至 于 Chrome 和 Safari 浏 览 器 则 似乎 更 加 智能 一 点 : 如 采 隐 藏 
元 素 同 时 又 设置 了 background-image， 则 图 片 依然 会 去 加 载 ， 如果 
是 父 元 素 的 display 计 算 值 为 none， 则 背景 图 不 会 请 求 ， 此 时 浏览 器 
或 许 放 心地 认为 这 个 背景 图 暂时 是 不 会 使 用 的 。 


IE8 浏 览 器 支持 base64 图 片 ， 包 括 在 background-image 属 性 中 使 
用 ， 可 以 节约 一 个 网 络 请 求 。 但 是 ，base64 图 片 的 演 染 性 能 并 不 高 ， 只 
适合 尺寸 比较 小 的 图 片 ， 大 尺寸 图 片 慎 用 。 


如 果 想 用 background-image 实 现 鼠 标 光标 经 过 变换 图 片 的 效果 

(例如 ， 灰 色 的 关闭 图 片 鼠 标 光标 经 过 变 成 深 色 ) ， 则 务必 将 这 两 张 
图 片 合并 在 一 张 图 片上 ， 除 了 减少 请 求 外 ， 这 样 做 更 重要 的 好 处 是 交 
互 体验 更 好 了 。 如 果 图 片 不 合 在 一 起 ， 当 鼠标 光标 经 过 的 时 候 ， 束 会 
去 请 求 另 外 一 张 图 片 的 地 址 ， 如 果 这 个 图 片 没有 被 缓存 ， 则 请 求 发 出 
去 到 图 片 显 示 是 有 一 段 时 间 的 ， 很 容易 出 现 姐 标 光标 经 过 关闭 图 片 ， 
结果 图 片 消失 的 情况 ， 实 际 上 图 片 不 是 消失 了 ， 而 是 还 在 请 求 的 路 
EE 


9.2.2 与 众 不 同 的 background-position 百 分 比 计算 方式 


CSS 中 有 一 类 属性 值 被 称 作 <position> 值 ， 表 示 一 种 CSS 数 据 类 
型 、 二 维 坐 标 空 间 ， 用 于 设置 相对 盒子 的 坐标 。 


<position> 值 文 持 1~4 个 什 ， 可 以 是 具体 数值 ， 也 可 以 是 百 分 
比值 ， 还 可 以 是 left、top、right、center 和 bottom 等 关键 字 。 


图 9-5 给 出 了 经 典 的 示意 。 


left center right 


100px 


top 75px left 100px 或 


left 100px ‘top 75PX 


75px 


Cent er.....L Tm 2 Fe, 
”或 right center | 

或 center left 100%. 

25% 或 top 50% left 100% 


bottom left 25% 或 
top 100% 25% :或 
100% 25% 


x 


图 9-5 ”<position> 值 经 典 示 意 


如 有 果 缺 省 偏 移 关 键 字 ， 则 会 认为 是 center， 因 此 background- 
position:top center 可 以 直接 写成 packground- 


position:tope 


IE8 浏 咒 占 最 多 只 文 持 同时 出 现 2 个 值 ， 从 IE9 开 始 文 持 同 时 出 现 3 
个 值 或 4 个 值 ， 作 用 是 指定 定位 的 偶 移 计算 从 哪个 方位 算 起 。 例 如 : 


background-position: right 40px bottom 20px; 


表示 距离 右边 缘 40 像 素 ， 距 离 拱 边缘 20 像 素 。 


<position> 值 也 文 持 百分比 值 ， 不 过 其 表现 与 CSS 中 其 他 的 百 分 
比 单位 表现 部 不 一 样 。 例 如 ， 一 个 图 片 : 


img { position: absolute; left: 100%; } 


一 定 是 在 包含 块 的 外 部 。 但 是 ， 在 <position> 值 中 却 是 不 一 样 的 表 
现 ， 如 图 9-6 所 示 。 其 中 ， 上 面 美女 图 片 是 background- 
position:100% 100% 定 位 ， 下 面 半 透明 的 美女 图 片 是 Left :100% 
定位 。 位 置 明 显 不 一 样 ， 主 要 是 <position> 值 的 百分比 值 有 着 特殊 
的 计算 公式 : 


容器 的 宽度 - 图 片 的 宽度 ) * percentX; 
容器 的 高 度 - 图 片 的 高 度 ) * percentyY; 


positionx 
positionY 


= 
= 人 


因此 ， 当 background-position:100% 100% 了 时候， 实际 定位 值 就 
是 容器 尺寸 和 图 片 尺寸 的 差 ， 于 是 就 有 了 右 下 角 所 示 的 定位 效果 。 


有 了 这 个 公式 ， 我 们 也 束 能 理解 百分比 负 值 的 一 些 表 现 了 。 比 方 
说 ， 你 觉得 下 面 这 行 CSS 代 码 对 应 图 片 的 表现 是 怎样 的 ? 


background-position: -50% -50%; 


不 是 觉得 图 片 应 该 是 定位 在 容 右 的 左上 角 ， 并 有 部 分 区 域 超出 不 可 
? 但 是 ， 实 际 出 现 的 效果 如 图 9-7 所 示 ， 接 近 于 下 面 CSS 代 码 的 效 


酒 六 好 


background-position: 40px 10px; 


图 9-6 ”两 个 不 同 的 百分比 定位 效果 


图 片 在 容器 内 效果 示 


会 想 不 通 ， 明 明 是 个 负 


图 9-7” 负 值 百 分 比 定位 


深 受 传统 百分比 定位 迷惑 的 我 们 可 能 一 时 
值 百分比 定位 ， 怎 么 会 古 一 个 正 值 效 琳 呢 ? 我 们 套用 <position> 百 
分 比值 计算 公式 ， 谍 种 然 开 朗 了 ! 


此 案例 中 容器 尺寸 是 160x160， 图 片 尺寸 是 256x192， 图 片 尺寸 大 


于 容器 尺寸 ， 所 以 : 
。 (容器 的 宽度 -图 片 的 宽度 ) x (-50%) 的 结果 是 个 正 值 ; 
。 (容器 的 高 度 -图片 的 高 度 ) x (-50%) 的 结果 也 是 个 正 值 。 


因此， 最 终 的 表现 并 不 是 图 片 定位 在 容 右 外 ， 而 是 定位 在 容 句 
po 


9.2.3 background-repeat 与 泻 染 性 能 


background-repeat 支 持 repeat、repeat-x、repeat-y 这 
儿 个 值 ， 语 义 清晰 ， 兼 容 性 好 ， 没 什么 有 趣 的 故事 。background- 
repeat 以 前 用 得 很 多 ， 但 如 今 设 计 趋 势 是 喜欢 遍 平 和 纯色 ， 其 使 用 频 
率 下 降 明 显 ， 反 倒是 在 实现 一 些 复 杂 纹 理 或 者 配合 “ 蝉 原则 ”实现 随机 
背景 这 些 比 较 新 潮 的 地 方 见 到 的 比较 多 。 


唯一 值得 一 提 的 一 个 小 知识 点 就 是 background- repeat 的 性 
能 。 举 个 例子 ， 要 实现 某 黑色 半 透 明 遮 单 背 景 ， 因 为 IE8 并 不 文 持 rgba 
半 透 明 背 景色 ， 所 以 为 了 兼容 我 们 决定 使 用 一 个 半 透 明 图 片 代 替 ， 假 
设 图 片 名 为 alpha,png， 则 CSS 代 码 如 下 : 


,OVer]lay { 
background: url(alpha.png); 


background: rgba(0,0,0,， .75); 


然后 有 些 人 为 了 追求 极致 ， 束 把 alpha. png 做 成 了 1 像素 x1 像 素 
大 小 ， 确 实 图 片 尺 寸 小 了 那么 一 点 点 ， 但 是 遮 单 背景 出 现 的 时 候 会 
明显 的 卡 顿 ， 体 验 非 常 不 好 。 客 其 原因 ， 就 是 平 铺 图 片 尺 寸 太 小 ， 平 
铺 次 数 太 多 ， 洽 染 太 吃力 ， 其 实 我 们 大 可 把 背景 图 保存 成 100 像 素 x100 
像素 大 小 ， 这 样 一 来 ， 图 片 尺寸 并 没有 大 多 少 ， 但 是 泻 染 性 能 却 有 了 明 


显 提升 。 


9.2.4 ”外 强 中 干 的 background-attachment :fixed 


Ee attachment :fixed 怕 是 很 多 人 都 没 用 过 ， 其 至 
都 没 见 过 。 这 是 一 个 IE7 浏 览 器 就 开始 支持 的 CSS 声 明 。 在 CSS 志 界 
中 ， ie 
其 中 scro11 是 默认 值 ， 就 是 平常 使 用 背景 图 的 效果 表现 ; fixed 表 示 
背景 相对 于 当前 文档 视 区 定位 ， 也 天 是 页 面 再 怎么 滚动 背景 图 片 位 置 
依旧 纹 丝 不 动 ， 稳 若 泰山 。 


听 上 去 ，background-attachmen:fixed 应 该 和 position， 
fixed 声 明 一 样 ， 是 个 很 历 害 的 角色 才 对 。 但 实际 上 其 外 强 中 干 ， 在 
某 些 场合 它 确实 很 厉害 ， 但 是 局 限 太 大 ， 没 法 实用 。 


举 个 例子 。 要 实现 一 个 图 片 局 部 动态 模糊 效果 ， 如 图 9-8 所 示 。 此 
时 ，background-attachment :fixed 就 可 以 大 显 神威 了 : 


图 9-8 方块 区 域 可 拖 点 ， 移 动 到 哪里 哪里 就 模糊 


.box { 
width: 256px; height: 192px; 
background-image: url(1.jpg); 
background-attachment: fixed; 
position: relative; 
overflow: hidden; 


} 
,box > .drag { 


width: 100px height: 100px; 
background: inherit,; 

filter: blur(S5px); 

cursor: grab; 

position: absolute; 


此 时 ， 只 要 , drag 元素 动态 改变 left/top 值 ， 我 们 的 功能 就 实现 了 。 
因为 . drag 元 素 的 background 继 承 于 父 元 素 .box， 同 样 的 背景 图 ， 
同样 的 background-attachment: fixed 锁 定 ， 根 本 就 不 需要 
JavaScript 动 态 改变 background-position 位 置 ， 因 为 元 素 都 是 相对 
于 文档 视 区 定位 的 。 


这 看 似 美 好 ， 却 有 一 个 很 大 的 局 限 性 ， 那 就 是 页 面 的 高 度 不 能 超 
过 一 屏 ， 因 为 页 面 一 旦 可 以 滚动 ， 效 果 吕 完全 被 毁 掉 ， 背 景 图 立马 就 
显示 不 全 了 ， 因 为 元 素 被 深 走 了 ， 但 是 背景 图 还 是 固定 的 。 如 图 9-9 所 
这 


图 9-9 ”页 面 滚动 时 候 ， 背 景 定 位 完全 不 合乎 预期 


而 绝 大 多 数 网 页 都 是 可 深 动 的 ， 这 就 让 background- 
attachment :fixed 只 能 局 限于 窗 体 背 景 图 的 使 用 上 。 当 然 ， 也 有 不 


太 好 的 支持 方法 ， 就 是 background-attachment :; fixed 交 互 做 出 
一 个 独立 的 小 页 面 ， 然 后 主页 面 使 用 一 个 小 的 jframe 髓 套 。 


IE9 及 以 上 版 本 浏览 器 新 增 了 一 个 background- attachment 属 
性 值 1ocal， 难 道 它 就 是 用 来 解决 上 面 的 “不 合乎 预期 ”的 现象 的 ? 不 
好 意思 ， 你 想 多 了 ， 它 们 不 是 一 路 的 。local 的 作用 是 ， 如 果 . box 元 
素 可 以 滚动 ， 则 .box 元 素 的 背景 图 也 可 以 被 深 走 ， 默 认 的 scrol1 值 
是 固定 的 ， 和 fixed 无 半点 儿 关 系 。 


9.2.5 background-color 背 景色 永远 是 最 低 的 


什么 意思 呢 ? 就 是 background 无 论 是 单 背 景 图 还 是 多 背景 图 ， 
背景 色 一 定 是 在 最 底下 的 位 置 。 知 道 这 一 特性 有 什么 作用 呢 ? 为 了 及 
时 准确 反馈 用 户 的 点 击 行为 ， 我 们 会 在 链接 或 按钮 元 素 上 增 
加 :active 样 式 ， 通 常 的 思路 是 :active 时 变换 一 下 背景 色 ， 但 是 这 
样 有 一 个 很 大 的 问题 ， 即 每 个 按钮 的 背景 色 都 是 不 一 样 的 ， 那 则 不 是 
要 写 很 多 个 :active 样 式 ?” 有 没有 什么 整 站 通用 的 简单 代码 呢 ? 当然 
有 “。 我 们 可 以 试 试 使 用 背景 图 片 代 替 背 景色 。 例 如 : 


a[hrefl]:active, button:active { 
background-image: linear-gradient(to top, rgba(0,0,0,.05), 


rgba(0,0,0,， .05) ); 


因为 背景 色 一 定 是 在 最 底下 的 位 置 ， 所 以 这 里 的 background-image 
一 定 是 覆盖 在 按钮 等 元 素 背 景色 之 上 的 ， 不 会 影响 按钮 原来 的 背景 
色 OO 


如 采 是 桌面 端 Web 项 目 ， 需 要 兼容 IE8 和 IE9 浏 览 右 ， 我 的 建议 是 使 
用 一 个 同等 效果 的 PNG 图 片 代 蕉 ， 具 体 代码 如 下 : 


a[href]:active, button:active { 

/* IE8, IE9 */ 

background-image: 
url(data:image/png;base64,iVBORwOKGgoAAAANSUNEUgAAAAoAAAAKCAY 
AAACNMs+9AAAAGXRFWHRTb2ZOd2FyZQBBZG9iZSBJbWFnNZVJl1YWR5ccl11PAAAABhJRE 
FUeNpiZGBg4Gug 


Aj coKqSvQoAAAwB65ACNoFNUMwAAAABJRU5ErkJggg==)， 
/* IE10+ */ 


background-image: linear-gradient(to top, rgba(0,o0,0, .05), 
rgba(0,0,0,， .05)); 
} 


大 功 告 成 ! 
9.2.6 ”利用 多 背景 的 属性 hack 小 技巧 

虽然 IE8 浏 览 器 并 不 支持 多 背景 ， 但 是 并 不 表示 IE8 浏 览 器 和 多 背 
景 效 果 无 缘 。 因 为 IE8 浏 览 器 支持 :before 和 :after 两 个 仿 元 素 ， 所 
以 配合 z-index 人 负 值 ， 我 们 可 以 实现 最 多 3 个 图 片 的 多 背景 效果 ， 对 绝 
大 部 分 的 需求 来 说 足够 了 。 


另外 ， 我 们 还 可 以 利用 多 背景 来 区 分 特定 的 浏览 右 。 举 个 例子 ， 
IE9 是 支持 SVG 背景 图 片 的 ， 但 IE8 不 支持 ， 于 是 我 们 可 以 让 IE8 浏 览 器 
加 载 PNG 图 片 ， 而 下 9 及 以 上 版 本 浏览 器 加 载 SVG 图 片 ， 这 样 就 不 用 使 
用 烦人 的 多 倍 图 了 。 下 面 问题 来 了 ， 如 何 有 效 地 区 分 IE8 和 IE9 浏 览 器 
呢 ? 


常用 的 :root .ie9 {} hack 技 巧 会 提高 元 素 的 权重 ， 并 不 是 一 
个 完美 的 方法 ， 而 巧 用 一 些 CSs3 属 性 或 属性 值 做 兼容 处 理 则 是 上 乘 的 
技术 策略 。 例 如 ， 这 里 束 可 以 这 样 处 理 : 


.bg { 
background: url(icon.png); 


background: url(icon.svg), none; 


IE8 浏 时 絮 不 认识 多 背景 的 写法 ， 目 然 会 急 略 第 二 行 声 明 ， 只 认 第 
一 行 的 PNG 背 景 ，IE9 及 以 上 版 本 浏览 器 则 会 使 用 后 面 的 声明 使 用 SVG 
图 片 。 


趁 热 打铁 ， 请 问 如 果 要 区 分 IE9 及 以 下 版 本 和 IE10 及 以 上 版 本 ， 该 
怎么 办 呢 ? 我 们 可 以 这 么 处 理 : 


‘bg { 
background: url(loading.gif); 


background: url(loading.png), linear-gradient(to top, 
transparent, transparent); 


IE9 不 认识 CSS3 渐 变 ， 因 此 会 忽略 第 二 行 CSS 声 明 。 
9.2.7 ”渐变 背景 和 rgba 背 景色 的 兼容 处 理 


IE9 浏 咒 占 不 文 持 再 景 渐变 ， 不 过 ， 也 是 有 和 手段 可 以 做 兼容 的 ， 那 
束 是 使 用 了 下 私有 的 渐变 滤 镜 。 例 如 ， 一 个 红 蓝 渐变 ， 可 以 使 用 下 面 的 
代码 : 


filter: 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=red, 


endcolorstr= 
blue, gradientType=1); 


这 行 滤 镜 代 码 主要 有 3 个 参数 ， 依 次 是 startcolorstr、 
endcolorstr 和 gradient Type。 其 中 gradientType=1 代 表 横 向 
渐变 ，gradientType=0 代 表 纵 加 渐渐 变 ，startcolorstr 代 表 渐 


变 起 始 的 色彩 。 除 了 使 用 颜色 关键 字 ， 还 可 以 使 用 十 六 进 制 颜色 表示 
法 ， 如 startcolorstr=#FF0000; endcolorstr 代 表 渐 变 结尾 的 
色彩 ， 也 文 持 十 六 进 制 颜色 表示 法 ， 如 endcolorstr=#00009FF。 


想 要 渐变 半 透 明 怎 么 办 ? 可 以 使 用 下 浏览 器 的 8 字符 的 十 六 进 制 颜 
色 表 示 法 ， 其 格式 为 #AARRGGBB，AA、RR、GG、BB 均 为 十 六 进 制 正 
整数 ， 取 值 范围 为 00~FF。RR 指 定 红色 值 ，GG 指 定 绿色 值 ，BB 指 定 蓝 
色 值 ，AA 指 定 透 明度 。00 表 示 完 全 透明 ，FF 表 示 完 全 不 透明 。 超 出 取 
值 范 围 的 值 将 被 恢复 为 默认 值 。 例 如 ， 渐 变 起 始 红色 可 以 写成 
startcolorstr= #FFFF0000。 


有 些 人 并 不 清楚 如 何 将 0~…1 的 CSS3 标 准 透 明度 值 转换 成 十 六 进 
制 。 事 实 上， 可 以 这 样 处 理 : 打开 浏览 器 控制 台 ， 假 设 需要 转换 的 透 
明度 是 opacity， 则 可 以 输入 下 面 的 代码 再 回 车 : 


Math.round(256 * opacity).tostring(16); 


综 上 所 述 ， 要 想 实 现 一 个 100% 红 色 到 50% 透 明度 蓝 色 垂 直 渐 变 ， 
可 以 使 用 如 下 代码 组 合 : 


.gradient { 
filter: 


progid:DXImageTransform.Microsoft.gradient(Sstartcolorstr=#FFFF0000， 
endcolorstr=#7 


FOOQOOFF, gradientType=0); 
background: linear-gradient(to bottom, red, rgba(0,909,255, .5)); 


IE8 浏 咒 占 不 文 持 rgba 半 透明 月 景色 ， 除 了 使 用 PNG 图 片 外 ， 也 可 
以 使 用 渐变 滤 镜 来 兼容 。 例 如 ， 要 实现 50% 半 透明 的 黑色 至 景 ， 可 以 这 


样 做 : 


.bgcolor { 

background: rgba(0,0,0,， .5); 

filter: progid:DXImageTransform,Microsoft .gradient(Sstartcolorstr= 
#7F000000,endcolorstr=#7F000000 ) ; 


:root .bgcolor { 
filter: none; 
} 


证 渐变 起 始 色 和 结束 色 保 持 一 致 ， 束 可 以 实现 纯 半 透明 背景 色 效 果 
了 。 在 IE9 浏 览 器 下 ，rgba 半 透明 和 filter 计 变 会 同时 起 作用 ， 因 此 
使 用 : root 选 择 怖 重 置 了 一 下 。 


第 10 章 “元素 的 显示 与 隐藏 


使 用 CSS 证 元 素 不 可 见 的 方法 很 多 ， 剪 裁 、 定 位 到 屏 才 外、 明度 
变化 等 都 是 可 以 的 。 虽 然 它们 都 是 肉眼 不 可 见 ， 但 背后 却 在 多 个 维度 
上 都 有 差别 。 


下 面 是 我 尽 结 的 一 些 比 较 好 的 隐藏 实践 。 


。 如 有 果 希 望 元 素 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ， 同 
时 不 渲染 ， 可 以 使 用 <script> 标 签 隐 藏 。 例 如 : 


<script type="text/html"> 


<img src="1.jpg"> 
</script> 


此 时 ， 图 片 1.jpg 是 不 会 有 请 求 的 。<script> 标 签 是 不 文 持 娩 
套 的 ， 因 此 ， 如 果 和 希望 在 <script> 标 签 中 再 放置 其 他 不 泻 染 的 模板 
内 容 ， 可 以 试 试 使 用 <textarea> 元 素 。 例 如 : 
<script type="text/html"> 


<img src="1.jpg"> 
<textarea style="display:none;"> 


<img src="2.jpg"> 
</textarea> 
</script> 


图 片 2. jpg 也 是 不 会 有 请 求 的 。 


另外 ，<script> 标 签 隐藏 内 容 获 取 使 用 script .innerHTML， 


<textarea> 使 用 textarea.value。 


。 如 宁 硕 望 元 素 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ， 但 
资源 有 加 载 ，DOM 可 访问 ， 则 可 以 直接 使 用 display:none 隐 
藏 。 例 如 : 


.dn 革 
display: none; 


。 如 果 希 望 元 素 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ， 但 
显 隐 的 时 候 可 以 有 transition 淡 入 淡出 效果 ， 则 可 以 使 用 : 


.hidden { 
position: absolute,; 


visibility: hidden; 


。 如 果 和 希望 元 素 不 可 见 ， 不 能 点 击 ， 辅 助 设 备 无 法 访问 ， 但 占据 空 
间 保 留 ， 则 可 以 使 用 visibility:hidden 隐 藏 。 例 如 : 
.Vh { 


visibility: hidden; 


} 


。 如 果 硕 望 元 素 不 可 见 ， 不 能 点 击 ， 不 占据 空间 ， 但 链 盘 可 访问 ， 
则 可 以 使 用 clip 筋 裁 隐藏 。 例如: 


.Clip { 
position: absolute,; 
clip: rect(0 0 0 0); 


} 
.OUt { 
position: relative; 


left: -999em; 
上 


。 如 果 硕 望 元 素 不 可 见 ， 不 能 点 击 ， 但 占据 空间 ， 且 键盘 可 访问 ， 
则 可 以 试 试 relative 隐 藏 。 例 如， 如 果 条 件 允 许 ， 也 就 是 和 层 
全 上 下 文 之 间 存 在 设置 了 背景 色 的 父 元素 ， 则 也 可 以 使 用 更 友好 
的 z-index 人 负 值 隐藏 。 例 如 : 


.Jower { 


position: relative; 
z-index: -1; 


。 如 末 希 望 元 素 不 可 见 ， 但 可 以 点 击 ， 而 且 不 占据 空间 ， 则 可 以 使 
用 透明 度 。 例 如 : 


.Opacity { 
position: absolute,; 
opacity: 0; 
filter: Alpha(opacity=0); 


。 如 果 单 纯 希望 元 素 看 不 见 ， 但 位 置 保 留 ， 依 然 可 以 点 可 以 选 ， 则 
直接 让 透明 度 为 0。 例 如 : 


.Opacity { 
opacity: 0; 


filter: Alpha(opacity=0); 


} 


读者 可 以 根据 实际 的 隐藏 场景 选择 合适 的 隐藏 方法 。 不 过 ， 实 际 
开发 场景 干 变 万 化 ， 上 面 罗列 的 实践 不 足以 覆 兰 全 部 情形 。 例 如 ， 在 
标签 受 限 的 情况 下 布 望 隐 藏 采 文字 ， 可 能 使 用 text- indent 缩 进 电 


最 友好 的 方法 。 如 果 和 希望 显示 的 时 候 可 以 加 一 个 transition 动 画 ， 
就 可 能 要 使 用 max-height 进 行 隐藏 了 。 例 如 : 


.hidden { 
max-height: 0; 


overflow: hidden; 


此 案例 在 3.3 节 的 max-height 部 分 已 有 展示 ， 这 里 天 不 多 说 了 。 
10.1 _ display 与 元 素 的 显 隐 


对 一 个 元 素 而 言 ， 如 果 display 计 算 值 是 none 则 该 元 素 以 及 所 
有 后 代 元 素 都 隐藏 ， 如 果 是 其 他 display 计 算 值 则 显示 。 


display 可 以 说 是 web 显 隐 交 互 中 出 场 频率 最 高 的 一 种 隐藏 方 
式 ， 是 真正 意义 上 的 隐藏 ， 干 净利 落 。 人 们 对 它 的 认识 也 比较 准确 ， 
无 法 点 击 ， 无 法 使 用 屏幕 阅读 器 等 辅助 设备 访问 ， 占 据 的 空间 消失 ， 
但 很 多 人 就 仅 局 限于 此 了 ， 实 际 上 ，display :none 的 故事 并 不 只 
这 人 么 一 点 点 。 


在 Firefox 浏 览 器 下 ，display :none 的 元 素 的 background- 
image 图 片 是 不 加 载 的 ， 包 括 父 元 素 display :none 也 是 如 此 ; 如 果 
是 Chrome 和 Safari 浏 蜗 器 ， 则 要 分 情况 ， 若 父 元 素 display :none,， 
图 片 不 加 载 ， 大 本 号 背景 图 所 在 元 素 隐 藏 ， 则 图 片 依旧 会 去 加 载 ， 对 
IE 浏 览 絮 而 言 ， 无 论 怎 样 都 会 请 求 图 片 资 源 。 


CSS 和 HTML 代 码 如 下 : 


,bg1 { 
background: url(../Images/1.png); 


} 
.bg2 { 


background: url(../Images/2.png); 


<div hidden class="bg1"></div> 
<div hidden><div class="bg2"></div></div> 


在 Chrome 浏 顺 器 下 的 网 络 请 求 如 网 10-1 所 示 。 


| 旬 本 (了 View: 三 于 preserve log 辆 Disable cache 


Regex Hide data URLs All ' XHR JS CSS Wim 


图 10-1 ” Chrome 浏览 器 下 图 片 请 求 


我 们 发 现 只 加 载 了 1.png， 因 此 ， 在 实际 开发 的 时 候 ， 如 头 图 轮 
播 切 换 效果， 那些 默认 需要 隐藏 的 图 片 作为 背景 图 藏 在 隐藏 元 素 的 子 
元 聚 上 ， 微 小 的 改动 束 可 以 明显 提升 页 面 的 加 载体 给， 可 以 说 古 非 党 
实用 的 小 技巧 。 


另外 ， 如 果 不 是 background-image 图 片 ， 而 是 <img> 元 素 ， 
则 设置 display :none 在 所 有 浏 宽 絮 下 依旧 都 会 请 求 图 片 资 源 。 


照 理 说 ，display :none 的 元 素 应 该 是 无 法 被 点 击 的 ， 
display:none 可 以 非常 彻底 地 隐藏 ， 肯 定 不 能 点 击 啊 ! 但 是 ， 下 面 


这 种 情况 却 例外 : 


<form> 
<input id="any" type="submit" style="display:none;"> 


<label for="any"> 提 交 </1label> 
</form> 


此 处 submit 类 型 的 “提交 ”按钮 设置 了 display:none,， 但 是 当 
我 们 点 击 “ 提 交 ” 的 时 候 ， 隐 藏 的 按钮 依然 会 触发 cLick、 触 发 表单 提 
交 ， 此 现象 出 现在 IE9 及 以 上 版 本 浏览 器 以 及 其 他 现代 浏览 器 中 。 


设置 dijsplay :none 的 意义 在 于 ， 当 按钮 和 <labe1l1> 元 素 不 在 一 
个 水 平 线 上 的 时 候 ， 点 击 <L1abe1> 元 素 不 会 触发 锚 点 定位 。 但 是 我 并 
不 推荐 这 么 做 ， 因 为 submit 按 钮 会 丢失 键盘 可 访问 性 。 


HTML 中 有 很 多 标签 和 属性 天 然 display:none， 如 <sty1le>、 
<Script> 和 HTML5 中 的 <dialog> 元 素 (如 果 浏 览 器 支持 ) 。 如 果 
这 些 标 签 在 <body> 元 素 中 ， 设 置 display: block 是 可 以 让 内 联 
CSS 和 JavaScript 代 码 直接 在 页 面 中 显示 的 。 例 如 : 
<style style="display:block;"> 


,二 { float: left; } 
</style> 


页 面 上 整 会 出 现 ,1 { float: left; } 的 文本 信息 ， 如 采 再 设置 


中 太 恒 已 


contenteditable= "true"， 在 有 些 浏 览 器 下 (如 Chrome) ， 甚 
至 可 以 直接 实时 编辑 预 宽 页 面 的 样式 。 


还 有 一 些 属性 也 是 天 然 display :none 的 。 例 如 ，hidden 类 型 
的 <input> 输 入 框 : 


专门 用 来 放置 类 似 token 或 者 id 这 样 的 隐藏 信息 ， 这 也 说 明 表 单元 素 
的 显示 与 隐藏 并 不 影响 数据 的 提交 ， 其 真正 影响 的 是 disabled 属 
性 。 


HTML5 中 新 增 了 hidden 这 个 布尔 属性 ， 可 以 让 元 素 天 生 
display':none 隐 藏 。 例 如 : 


IE11 以 及 其 他 现代 浏览 器 都 支持 它 ， 因 此 ， 如 果 要 兼容 桌面 端 ， 
需要 如 下 CSS 设 置 : 


[hidden] { 
display: none; 


display :none 显 隐 控 制 并 不 会 影响 CSS3 animation 动 画 的 实 
现 ， 但 是 会 影响 CSS3 transition 过 渡 效 采 执 行 ， 因 此 transition 
往往 和 visibility 属 性 走 得 比较 近 。 


对 于 计数 器 列表 元 素 ， 如 果 设 置 dijsplay :none， 则 该 元 素 加 入 
计数 队列 。 举 个 例子 ，10 个 列表 从 1 开始 递增 ， 假 设 第 二 个 列表 设置 了 
display :none， 则 原来 的 第 三 个 列表 计数 变 成 2， 最 后 总 计数 是 9。 


10.2 visibility 与 元 素 的 显 隐 


10.2.1 不 仅仅 是 保留 空间 这 么 简单 


有 一 些 人 简单 地 认为 display:none 和 visibility:hidden 两 
个 隐藏 的 区 别 就 在 于 : display :none 隐 藏 后 的 元 素 不 占据 任何 空 
间 ， 而 visibility:hidden 隐 藏 的 元 陛 空 间 依旧 保留 。 实 际 上 并 没 
有 这 么 简单 ，visibility 是 一 个 非常 有 故事 的 属性 。 


1. visibility 的 继承 性 


首先 ， 它 最 有 意思 的 一 个 特点 就 是 继承 性 。 父 元 素 设置 
visibility:hidden， 子 元 素 也 会 看 不 见 ， 究 其 原因 是 继承 性 ， 子 
元 素 继承 了 visibility:hidden， 但 是 ， 如 果子 元 素 设 置 了 
visibility:visible， 则 子 元 素 义 会 显示 出 来 。 这 个 和 display 
隐藏 有 着 质 的 区 别 。 


我 们 看 一 个 例子 来 切实 感受 一 下 ，HTML 代 码 如 下 : 


<ul style="visibility:hidden;"> 
<11 style="visibility:visible;"> 人 列表 1</1i> 
<]i> 列 表 2</1i> 


<1i> 列 表 3</1i> 
<1i style="visibility:visible;"> 列 表 4</1i> 
</U]> 


列表 父 元 素 visibility:hidden,， 千 万 不 要 想当然 地 认为 此 时 
所 有 子 元 素 就 都 不 可 见 了 ， 最 终 效 果 如 图 10-2 所 示 , “列表 1” 和 “列表 
4 依旧 清晰 可 见 。 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/10/2-1.php 或 者 扫 右 侧 
的 二 维 码 。 


这 种 visibility:visible 后 代 可 见 的 特性 ， 在 实际 开发 的 时 
候 非 常 有 用 。 例 如 ， 它 可 以 让 异步 加 载 时 体验 更 好 。 举 个 我 上 周 项 目 
中 遇 到 的 案例 ， 使 用 头像 上 传 功能 ， 上 传 完毕 要 进入 剪裁 界面 ， 界 面 
如 图 10-3 所 示 。 


。 人 列表] 


。 列表 4 


图 10-2 visibility 继 承 性 演示 效果 


去 尺寸 预览 


草 裁 丰 堪 


中 尺 才 预览 


和 - 尺 寺 预览 


区 了 ES 


图 10-3 ”剪裁 界面 示意 


这 里 就 有 一 个 异步 的 过 程 ， 后 端 只 返回 了 一 个 图 片 地 址 ， 我 们 需 
要 先 动态 获取 图 片 尺 寸 ， 再 去 计算 ， 以 便 准 确 显示 缩 略 效 果 以 及 初始 
化 剪裁 功能 。 比 较 差 一 点 儿 的 方法 束 是 先 用 默认 头像 占 位 ， 等 获取 到 
图 片 凡 十 后 再 奉 换 ， 或 者 借助 visibility 属 性 。 


模块 外 部 容器 设置 visibility:hidden， 剪 裁 区 域 里 面 放 一 个 
加 载 效果 ， 设 置 visibility:visible。 图 片 尺 寸 获 取 成 功 后 ， 再 
正常 初始 化 ， 然 后 让 外 部 容器 visibility 属 性 重 置 为 visible。 这 
样 体验 就 会 好 很 多 ， 用 户 只 会 看 到 “加 载 中 一 剪裁 界面 "*， 而 不 是 “ 占 位 
界面 -加 载 中 一 最 终 操作 界面 ”。 


HTML 示 意 如 下 : 


<div style="visibility:hidden;"> 
<div class="main-box"> 

<div class="operate-box"> 
<i class="icon-loading" style="visibility:visible;"> 
加 载 中 , . ， 
</i> 

</div> 

<div class="button-box"> 


<button> 确 定 </button> 
<button> 取 消 </button> 
</div> 
</div> 


<div class="preview-box"> 
大 ， 中 ， 小 预 换 图 ,.， 
</div> 
</div> 


2. visibility 与 CSS 计 数 器 


visibility:hidden 不 会 影响 计数 絮 的 计数 ， 这 和 
display :none 完 全 不 一 样 。 举 个 例子 ， 如 下 CSS 和 HTML 代 码 : 


.Vh 区 
visibility: hidden; 


} 
.dn 革 


display: none; 


ol { 
border: 1px solid; 
margin: 1em 0; 
counter-reset: test 


} 
li:after { 
counter-increment: test; 
content: counter(test); 
} 
<ol> 
<1i> 列 表 </1i> 
<1i class="dn"> 列 表 </1i> 
<1i> 列 表 </1i> 
<1i> 列 表 </1i> 
</ol1> 
<ol> 
<1i> 列 表 </1i> 
<1i class="Vvh"> 列 表 </1i> 
<1i> 列 表 </1i> 
<1i> 列 表 </1i> 
</ol1> 


结果 如 图 10-4 所 示 。 


图 10-4 visibility 和 display 隐 藏 与 CSS 计 数 器 效果 


可 以 看 到 ，visibility':hidden 虽 然 让 其 中 一 个 列表 不 可 见 
了 ,但 是 其 计数 效果 依然 在 运行 。 相 比 之 下 ， 设 置 display :none 的 
列表 就 完全 没有 参与 计数 运算 。 


3. visibility 与 transition 


下 面 的 CSS 是 会 让 .box 元 素 hover 时 显示 ,target 子 元 素 ， 但 不 
会 有 过 渡 效 果 : 


‘box > .target { 
display: none; 
position: absolute,; 
opacity: 0; 
transition: opacity .25s; 


.box:hover > .target { 
display: block; 
opacity: 1; 


但 是 ， 下 面 的 CSS 语 句 却 可 以 让 ,target 子 元 素 有 淡出 的 过 渡 效 果 : 


‘box > .target { 
position: absolute; 
opacity: 0; 
transition: opacity .25s; 
visibility: hidden; 


.box:hover > .target { 
visibility: visible; 
opacity: 1; 


这 是 为 什么 呢 ? 因为 CSS3 transition 支 持 的 CSS 属 性 中 有 
visibility，, 但 是 并 没有 display。 


由 于 transition 可 以 延 时 执行 ， 因 此 ， 和 visibility 配 合 可 
以 使 用 纯 CSS 实 现 nover 延 时 显示 效果 ， 由 此 提升 我 们 的 交互 体验 。 


图 10-5 所 示 是 一 个 很 常见 的 hover 蕊 浮 显示 列表 效果 ， 而 且 有 多 
个 触发 点 相 邻 ， 对 于 这 种 hover 交 互 ， 如 采 在 显示 的 时 候 增加 一 定 的 
延 时 ， 可 以 避免 不 经 意 触 磁 导致 覆 志 目标 元 素 的 问题。 例如 ， 图 10-5 
虽然 显示 的 是 第 一 行 的 下 拉 列 表 ， 但 真相 即 可 能 是 : 我 本 来 想 去 
hover 第 二 行 的 “操作 "文字 ， 但 是 由 于 鼠标 光标 移动 路 径 不 小 心经 过 
了 第 一 行 的 “操作 ”， 结 采 把 第 二 行 本 来 hover 的 “操作 ” 覆 兰 了， 必须 
重新 移出 去 ， 避 开 干 扰 元 素 ， 重 新 hover 才 行 。 如 此 一 来 ， 体 验 就 不 
六 


图 10-5 ”hover 显 示 列 表示 意 


但 是 有 了 visibility 属 性 和 transition 延 时 ， 我 们 就 可 以 把 
这 种 不 悦 的 体验 消除 掉 ， 关 键 的 HTML 和 CSS 代 码 如 下 : 


< 七 d> 
<a href> 操 作 v</a> 
<div class="]list"> 
<a href> 编 辑 </a> 
<a href> 删 除 </a> 
</div> 
</td> 
.Jist { 
position: absolute,; 
visibility: hidden; 


td:hover .list { 
visibility: visible; 
transition: visibility 0SsS .2s; 


} 


transition 在 hover 时 候 声 明 可 以 让 鼠标 光标 移出 的 时 候 列 表 
无 延 时 地 迅速 隐藏 。 


有 了 上 面 的 CSS 处 理 ， 当 我 们 鼠标 光标 奔 疝 第 二 行 的 “操作 ” 按 
钮 ， 但 不 小 心经 过 第 一 行 “ 操 作 *” 按 钮 时 ， 就 不 会 发 生 瞬 间 出 现 列 表 而 
黎 盖 目标 元 素 的 问题 了 。 大 家 可 以 手动 输入 
http://demo.cssworld.cn/10/2-3.php 这 个 地 址 杀 目 感受 一 下 。 


transition 隐 藏 除了 和 transition 友 好 外 ， 与 
display:none 相 比 ， 其 在 JavaScript 侧 也 更 加 友好 。 存 在 这 样 的 场 
景 : 我 们 需要 对 隐藏 元 素 进 行 尺寸 和 位 置 的 获取 ， 以 便 对 交互 布局 进 
行 精准 定位 。 此 时 ， 建 议 使 用 visibil1ity 隐 藏 : 


,hidden { 
position: absolute,; 


visibility: hidden; 


原因 是 ， 我 们 可 以 准确 计算 出 元 素 的 尺寸 和 位 置 ， 如 果 使 用 的 是 
display :none， 则 无 论 是 尺寸 还 是 位 置 都 会 是 90， 计算 就 会 不 准 
确 。 例 如 ， 假 设 element 和 是 页 面 上 某 个 display:none 隐 藏 元 系 
DOM 对 象 ， 则 : 


.log('clientwidth: ' + element.clientwidth); 
.log('clientHeight: ' + element.clientHeight); 
.log('clientLeft: ' + element.clientLeft); 


.log('clientTop: ' + element.clientTop); 
.dir(element.getBoundingClientRect()); 


结果 会 如 图 10-6 显 示 的 那样 全 部 都 是 0。 


clientWidth: 9 

clientHeight: 9 

clientLeft: 8 

clientTop: 9 

Vv ClientRect 
bottom: 0 
height: 8 
left: @ 


right: @ 


上 : ClientRect 


图 10-6 ”display :none 元 素 尺寸 和 位 置 计算 值 全 部 都 是 0 


不 仪 如 此 ，transition 隐 沽 在 无 障碍 访问 这 一 块 也 比 
display :none 更 友好 些 。 举 个 例子 ， 对 于 一 个 点 击 扩 时 层 束 隐 着 迹 
蛙 层 的 交互 ,很 多 人 可 能 是 这 么 实现 的 : 


overlay.onclick = function () { 


this.style.display = 'none'; 
}; 


如 果 不 考 虚 无 障碍 访问 ， 这 么 实现 也 算 和 干脆 利落 ; 但 如 果 要 兼顾 
无 障碍 访问 ， 则 使 用 display :none 就 没有 使 用 visibility 友 好 


而 非 视 觉 感知 ， 


视觉 障碍 用 户 对 页 面 状态 变化 都 是 通过 声音 
征 遮 音 浮 讨 的 一 些 摘 述 


此 ， 束 有 必要 告知 准确 的 状态 信息 。 下 面 台 
显示 时 和 隐藏 时 分 别 如 下 : 


<div class="overlay" role="button" title=" 点 击 关闭 浮 层 "></div> 


<div class="overlay hidden" role="button'" title=" 浮 层 已 关闭 "></div> 


以 iPhone 的 VoiceOver 为 例 ， 如 果 .hidden 语 句 是 这 样 的 : 


.hidden { 
visibility: hidden; 


} 


那么 当 我 们 关闭 浮 层 时 ，YVoiceOver 会 读 “ 浮 层 已 关闭 *?， 很 梭 ， 对 不 
对 ? 但 是 ， 如 果 ,.hidden 语 句 是 这 样 的 : 


,hidden { 
display: none ; 


那么 当 我 们 关闭 浮 层 时 候 ，VoiceOver 会 读 浮 层 下 面 元 素 的 相关 信息 ， 
至 于 ,overlay 元 素 是 否 关 闭 ， 就 只 能 靠 经 验 去 猜测 了 ， 这 显然 就 不 
如 visibility 友 好 。 


上 面 的 案例 我 特意 做 了 一 个 演示 页 面 ， 如 果 读 者 有 屏幕 阅读 软 
件 ， 可 以 手动 输入 http://demo.cssworld.cn/10/2-4.php 或 者 扫 右 侧 的 二 维 
码 。 


最 后 ， 有 必要 强调 一 下 可 能 出 现 的 误区 。 


(1) 普通 元 素 的 tit1e 属 性 是 不 会 被 朗读 的 ， 除 非 辅 以 按钮 等 控 
件 元 素 ， 这 里 是 因为 设置 了 role="button" 所 以 才 可 以 朗读 。 


(2) visibility:hidden 元 素 是 不 会 被 朗读 的 ， 注 意 ， 不 会 
被 朗读 ! 本 案例 之 所 以 会 被 朗读 ， 从 显示 到 隐藏 ， 遮 单 层 focus 的 区 
域 还 在 (display :none 则 丢失 ， 因 为 尺寸 位 置 全 部 变 成 0)” ， 你 可 
以 理解 为 遮 罩 层 的 “ 遗 通 ”还 在 。 


朗读 结束 后 再 去 触 碰 这 片区 域 的 时 候 ， 是 无 论 如 何 也 找 不 到 已 经 
visibility:hidden 的 这 个 遮 田 元 素 的 。 


10.2.2 ” 了解 visibility:collapse 


大 家 只 要 了 解 visibility 支 持 的 属性 值 还 有 个 collapse 就 可 
以 了 。 其 他 信息 ， 类 似 原本 其 设计 是 作为 表格 用 的 ， 则 完全 不 用 在 
意 ， 因 为 对 于 表格 相关 元 素 ， 部 分 现代 浏览 器 对 
visibility:collapse 的 解析 是 不 准确 的 ， 无 实用 价值 ， 对 于 普通 
元 素 ，visibility: colLlapse 又 等 同 于 visibility:hidden， 
直接 使 用 visibility:hidden 就 好 了 ，collapse 这 个 单词 义 长 义 
难 记 住 ， 没 有 理由 使 用 。 


第 11 章 ”用户 界面 样式 


用 户 界 面 样式 指 的 是 CSS 世 界 中 用 来 帮助 用 户 进 行 界面 交互 的 一 
些 CSS 样 式 ， 主 要 有 out1Line 和 cursor 等 属性 。 


11.1 和 border 形 似 的 outline 属 性 


out1ine 表 示 元 素 的 轮廓 ， 语 法 和 border 属 性 非常 类 似 ， 分 宽 
度 、 类 型 和 颜色 ， 支 持 的 关键 字 和 属性 值 与 border 属 性 一 模 一 样 。 
例如 : 


.Outline { 
outline: 1px solid #000; 
} 


两 者 表现 也 类 似 ， 都 是 给 元 素 的 外 面 画 框 。 但 是 ， 设 计 的 作用 却 
大 相 径 庭 。 


11.1.1 “万 万 不 可 在 全 局 设置 outLine:0 none 


out1ine 是 一 个 和 用 户 体验 密切 相关 的 属性 ， 与 focus 状 态 以 及 
键盘 访问 关系 密切 。 


在 桌面 端 网 页 ， 对 于 按钮 或 者 链接 ， 我 们 通 音 都 是 使 用 鼠标 点 击 
去 完成 操作 。 但 是 世事 难 料 ， 总 会 存在 用 户 只 能 使 用 键盘 访问 网 站 的 


智能 电视 中 访 


情况 。 例 如 ， iMac 鼠标 没 电 了 ， 或 者 鼠标 坏 了 ， 或 者 在 智 
问 网 站 (遥控 器 本 质 上 也 是 个 操作 键盘 ) 。 
好 在 所 有 的 浏览 器 原生 就 有 键盘 访问 网 页 的 能 力 ， 对 于 按钮 或 者 
链接 ， 通 常 的 键盘 操作 是 :Tab 键 按 次 序 不 断 focus 控 件 元 素 ， 包 括 链 
接 、 按 钮 、 输 入 框 等 表单 元 素 ， 或 者 focus 设 置 『 了 tabindex 的 普通 


元 素 ， 按 Shift+Tab 组 合 键 反方 向 访问 
， 重 点 来 了 ! 在 默认 状态 下 ， 对 处 于 focus 状 态 的 元 素 ， 浏 


才 虚 框 或 者 外 发 光 的 形式 进行 区 分 和 提示 。 例 如 ， 在 Chrome 
中 输入 框 focus 时 的 蓝 色 外 框 效 果 ， 如 图 11-1 所 示 。 


I 二 
这 种 虚 框 或 者 外 发 光 效 果 是 非常 有 必要 的 ， 否 则 用 户 根本 吏 不 知 


农 焦 在 哪个 元 素 上 ， 甚 至 因此 而 迷失 。 
束 相 当 于 鼠标 点 击 了 这 个 元 素 ， 从 
或 者 执行 我 们 想 要 的 


道 目 己 当前 双 
元 素 聚 焦 后 ， 再 按 下 回 车 键 ， 


而 可 以 前 往 我 们 想 去 的 目的 地 (如 <a> 链 接 ) 
交互 效果 【如 按钮) 


ee 


效果 


图 11-1 Chrome 输入 框 focus 时 候 的 蓝 色 外 框 效 遇 
览 句 默认 的 


以 上 惑 是 我 们 的 键盘 访问 过 程 。 可 以 看 出 来 ， 浏 
标记 是 一 个 非常 有 用 的 行为 。 因此， 类 似 下 面 的 代码 其 


y 就 是 ~ Y 
outline 高 亮 标 记 是 一 个 非常 
实 是 非常 不 专业 的 : 
* 
outline: © none; 


现代 浏 斋 怖 的 focus 体 验 现 在 已 经 做 得 很 好 了 ， 对 于 普通 链接 或 
者 按钮 ， 当 我 们 点 击 的 时 候 ， 已 经 不 会 出 现 out1ine 效 果 了 ， 只 有 键 
一 Tab 或 者 JavaScript 的 element .focus() 主 动 触 发 才 会 有 发 光 歼 
果 ， 因 此 ， 我 实在 想 不 出 为 什么 要 设置 下 面 这 样 的 CSS 代 码 : 


at 
outline: © none; 
} 


对 于 输入 框 元 隶 ， 我 倒是 可 以 理解 ， 因 为 必须 要 和 多 focus 才能 输 
入 内 容 ， 一 些 浏览 器 内 置 的 focus 效 果 可 能 和 我 们 的 网 页 设计 格格 不 
入 ， 因 此 需要 重 置 ， 要 使 用 专门 的 类 名 。 例 如 : 


.input { 
outline: 0; /* outline:none 亦 可 */ 


} 


但 是 ， 必 须 把 focus 态 样式 加 上 。 例 如 ， 我 们 可 以 让 输入 框 的 边框 其 


EU 


.input:focus { 
border-color: Highlight; 
} 


最 后 再 强调 一 遇 : 万 万 不 可 在 全 局 设置 outline:0 none! 这 样 
的 错误 会 造成 部 分 场景 下 的 部 分 用 户 产 生 使 用 障碍 ! 


国内 很 多 大 站 也 会 犯 类 似 的 错误 ， 注 意 千 万 不 要 学 习 ， 千 万 不 要 
模仿 ! 


在 实际 开发 的 时 候 ， 有 时 候 需 要 让 普通 元 素 有 类 似 控 件 元 素 的 
out1ine 效 果 。 例 如 ， 基 于 原生 的 单 复 选 框 模拟 单 复 选 框 ， 或 者 为 了 
规避 submit 类 型 按钮 UI 很 难 完 全 保持 一 致 的 问题 ， 我 们 会 使 用 
<1abe1> 元 素来 移花接木 ， 通 过 for 属 性 和 这 些 原生 的 表单 控件 相关 
联 。 例 如 : 


<input id="t" type="submit"> 


<label class="btn" for="t"> 提 交 </label> 


原始 按钮 不 可 见 ，<labe1l> 元 素 变 身 按钮 : 


[type="submit"] { 
position: absolute; 
clip: rect(0 0 0 0); 


.btn { 
display: inline-block; 


padding: 2px 12px; 
background-color: #cd0000; 
color: #fff; 

font-size: 14px; 

cursor: pointer; 


虽然 样式 上 完美 了 ， 但 却 留 下 了 一 个 键 弄 可 访问 性 的 问题 : 当 我 
们 使 用 Tab 键 在 页 面 上 壳 历 元 素 的 时 候 ，focus 的 是 隐藏 的 原生 提交 按 
钮 ， 而 “代言 人 ”<labe1> 元 素 无 法 被 focus， 这 了 吏 会 导致 这 样 的 现 


象 ， 用 户 遍 历 页 面 控件 元 素 一 直 都 很 顺利 ， 突 然 要 到 提交 按钮 的 时 
候 ， 页 面 却 突然 如 死水 一 般 ， 没 有 任何 元 素 有 outline 高 亮 。 原 因 就 
是 被 focus 的 按钮 元 素 处 于 隐藏 状态 ， 用 户 无 法 看 到 out1line 效 果 ， 
此 时 我 们 就 需要 额外 增加 一 层 CSS 代 码 ， 让 <labe1l> 这 个 “代言 人 ” 连 
键盘 focus 状 态 也 一 起 代言 了 ， 也 就 是 说 ， 当 我 们 focus 看 不 见 的 提 
交 按 钮 的 时 候 ， 让 “代言 人 ”<labe1l> 元 素 模 拟 原生 的 focus 高 亮 效 
-ee 


:focus + label.btn { 
outline: 1px dotted Highlight; 


outline: Spx auto -webkit-focus-ring-color; 


Highlight 是 系统 高 党 色 ， 这 里 用 来 模拟 IE 和 Firefox 浏 哆 妖 的 
outline 效 果 相 当 合 适 ， 而 下 面 的 5px auto -webkit-focus- 
ring-color 是 在 Chrome 浏 览 右 下 使 用 浏览 右 目 带 的 focus 外 发 光 
out1ine 效 果 ， 这 里 的 5pXx 其 实 无 和 关 紧 要 ， 写 3pX 歼 果 也 是 一 样 的 。 


最 后 ， 就 有 了 非常 符合 预期 的 近乎 原生 的 focusout1Line 效 果 
了 ， 如 图 11-2 和 图 11-3 所 示 。 


用 户 名 : 


图 11-2 ”Chrome 下 <labe1l1> 元 素 outline 效 果 - 发 光 


用 户 名 : | 


图 11-3 ” 正 下 <Jabe1> 元 素 out1Line 效 果 - 虚 框 
11.1.2 真正 的 不 占据 空间 的 outline 及 其 应 用 


outline 是 本 书 介绍 到 现在 出 现 的 第 一 个 真正 意义 上 的 不 占据 任 
何 空间 的 属性 。 例 如 ， 内 联 元 素 的 上 下 padding 值 似乎 不 占据 任何 空 
间 ， 但 是 一 旦 祖先 元 素 overflow 计 算 值 不 是 visible， 同 时 
padding 值 足够 大 ， 深 动 条 就 会 出 现 ， 骏 露出 “不 占据 空间 ”其 实 是 一 
个 假象 。 但 是 out1line 属 性 确实 不 占据 任何 空间 ， 轮 万 宽 度 设 置 得 再 
宽广 ， 也 不 会 影响 任何 元 素 的 任何 布局 ， 并 且 outline 轮 亡 是 可 罕 透 
的 。 考 虑 到 out1Line 是 一 个 从 下 8 开始 束 被 文 持 的 CSS 属 性 ， 这 残 注定 
了 outline 要 脱离 其 设计 初衷 ， 在 其 他 方面 大 显 神 通 ， 例 如 ， 用 于 实 
现 一 些 看 似 环 手 的 布局 效果 。 


1. 案例 一 : 头像 剪裁 的 矩形 铂 空 效果 


有 一 种 图 片 草 裁 效果 是 通过 移动 前 景 蔓 裁 区 域 实现 的 ， 如 图 11-4 
所 示 。 移 动 时 的 样式 如 图 11-5 所 示 。 


竟 裁 ( 仅 演 示 移 动 ) 预览 


图 11-4 ”头像 剪裁 的 铂 空 矩形 示意 


菌 裁 ( 仅 演 示 移 动 ) 


图 11-5 ”正在 移动 的 头像 剪裁 的 铂 空 矩形 


这 种 中 间 铂 空 透明 、 四 周 索 层 遮 章 的 效果 是 如 何 实现 的 呢 ? 


如 宁 页 面 没有 滚动 条 ， 倒 是 可 以 试 试 background- 
attachment :fixed 声 明 ， 三 层 结 构 ， 底 部 原 图 ， 中 间 遮 罩 ， 最 上 
面 拖 虚 元 素 ， 拖 忠 元 素 背 景 图 片 就 是 底部 原 图 ， 且 fixed 定 位 ， 于 
是 ， 当 我 们 移动 最 上 层 元 素 时 候 ， 背 景 图 因为 不 跟随 移动 ， 给 人 感觉 
就 是 “ 镑 空 的 ”。 


但 是 ,“ 页 面 没有 滚动 条 ”这 个 限定 太 大 了 ， 实 际 项 目 很 难 满足 ， 
因此 和 需要 男 寻 他 法 。 我 曾 多 次 见 到 过 这 种 做 法 ， 即 半 透 明 的 黑色 蒙 层 
实际 上 古 由 很 多 个 矩形 拼 起 来 的 ， 避 开 中 间 区 域 从 而 形成 钱 空 效果 。 
这 种 做 法 比较 符合 现实 认 知 ， 因 此 相对 比较 容易 理解 和 想到 ， 但 是 ， 
在 代码 世界 里 ， 这 其 实 是 一 种 非常 麻烦 的 做 法 。 


如 果 我 们 把 思维 发 散 ， 克 服 常 态 效 应 和 惯性 思维 ， 职 会 找到 很 多 
非常 简单 的 其 他 方法 ， 例 如 这 里 要 隆重 出 场 的 out1ine 属 性 ， 核 心 
CSS 代 码 如 下 : 


.Crop { 
overflow: hidden; 


.Crop > .crop-area { 


width: 80px; height: 80px; 
outline: 256px solid rgba(0,0,0,， .5); 
cursor: move; 


} 


用 一 句 话 概 括 就 是 使 用 一 个 大 大 的 out1Line 来 实现 周围 半 透 明 黑 
色 遮 罩 。 ee 度 设 置 再 大 ， 也 不 会 对 布局 产生 任何 影响 ， 
至 于 超出 的 区 域 ， 通 过 容 絮 overflow:hidden 隐 着 就 可 以 了 。 


没 错 ， 原 理 就 是 这 么 简单 。 


当然 ， 实 际 的 代码 还 有 很 多 细 市 需要 考虑 ， 如 下 : 


.Crop-area { 
outline: 256px solid #000; 
outline: 256px solid rgba(0,0,0,.5); 
background: url(about:blank); 
background: linear-gradient(to top, transparent, transparent); 


filter: alpha(opacity=50); 
cursor: move; 


} 


:root .crop-area { 
filter: none; 
} 


首先 ，IE8 浏 览 器 不 支持 rgba 颜 色 ， 因 此 这 里 借助 了 透明 度 滤 镜 
进行 兼容 。 由 于 IE9 浏 览 器 同时 文 持 两 者 ， 因 此 借助 :root 进行 了 重 
置 ; 其 次 ， 包 括 正 10 在 内 的 下 浏览 器 下 的 铂 衬 元 素 会 有 点 击 穿 透 的 问 
题 ， 这 里 采用 的 方法 是 使 用 background 属 性 设置 看 不 见 的 背景 内 
容 ， 于 是 惑 有 了 上 面 的 CSS 代 码 。 


S 


更 完整 的 代码 和 更 切 肤 的 感 有 党 可 以 手动 输入 地 址 
http://demo.cssworld.cn/ 11/1-1.php 进 行 体 验 。 


2. 案例 二 : 目 动 填 满 屏幕 剩余 空间 的 应 用 技巧 

有 不 少 网 站 的 主 背 景 古 日 色 的 ， 改 部 是 深 色 的 ， 于 是 殊 会 出 现 这 
么 一 个 场景 : 当主 内 容 很 少 的 时 候 ， 包 括 底 部 在 内 都 不 足 一 屏 ， 或 者 
用 户 显 示 器 是 坚 屏 ， 则 很 可 能 束 会 出 现 图 11-6 所 示 的 这 样 尴 广 的 情 
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co— 栏 档 留 自 


图 11-6 ”高 度 不 足 导致 底部 下 面 留 白 示 意 


如 何 让 压 部 痛 景 色 正好 填 满 剩余 屏 医 区域 呢 ? 目前 我 知道 的 最 好 
的 办 法 殉 是 巧 用 out1ine 必 性。 假设 底部 HTML 代 码 是 这 样 的 : 


<div class="footer"> 
<p>Designed &amp; Powered by zhangxinxu</p> 
</div> 


那么 就 有 如 下 CSS 示 意 代码 : 


.footer { 
height: 50Opx; 


,footer >pt 
position: absolute,; 
left: 0; right: 0; 


text-align: center 

padding: 15px 0; 
background-color: #agob3d6 ; 
outline: 9999px solid #aQ0b3d6; 
clip: rect(90 9999px 9999px 0); 


最 关键 的 CSS 束 古 设 置 一 个 超大 轮廓 范围 的 0utline 属 性 。 例 
如 ， 这 里 是 9999px， 作 用 是 保证 无 论 屏 人 幕 多 高 ， 轮 廊 色 块 也 一 定 能 
够 覆盖 。 


但 是 和 border 属 性 不 一 样 ，out1ine 是 无 法 指定 方位 的 ， 只 能 
被 动 地 四 周 扩展 。 因 此 ，outline:9999px solid #agb3d6 不 仅 
会 填 满 底部 方位 的 屏幕 空间 ， 还 会 把 上 面 的 内 容 空间 也 填 满 。 因 此 ， 
我 们 还 需要 做 进一步 处 理 ， 例 如 ， 提 高 主体 内 容 的 层 县 顺序 ， 但 这 显 
然 成 本 太 高 ， 歼 果 也 不 一 定好 ; 还 有 就 是 采用 这 里 的 cLip 剪 裁 生 略 ， 
让 底部 内 容 元 素 绝 对 定位 ， 同 时 以 上 边缘 和 左边 缘 为 界 进行 裁剪 ， 这 
样 ， 就 完全 不 用 担心 out1Line 会 覆盖 上 面 的 内 容 啦 ! 代码 组 合 为 : 


{ 


position: absolute; 


clip: rect(0 9999px 9999px 0); 


使 用 9999px 这 么 大 的 值 也 是 为 了 确保 100% 填 满 屏 幕 。 于 是 ， 此 
时 的 效果 就 成 了 如 图 11-7 所 示 的 样子 。 


¢ Css RY 


HTML : CS5 ; 
<div class="footer”> ‘fooser { 
<p>0esigned Sonp; Ponered by zhongxtmxu<cyp> hetghe: Sopx; 
</dtv> 
,Foorer 


-pi 
position: absolute; 


Si Cre 9999px 9999px 9); 


图 11-7 ”底部 色 块 自动 填 满 屏幕 整 页 示意 


现在 再 也 不 用 担心 屏幕 高 度 太 高 了 ! 
11.2 ”光标 属性 cursor 


11.2.1 琳琅 满目 的 cursor 属 性 值 


想 想 看 ， 你 平时 做 项 目 时 对 CSS 的 cursor 属 性 的 使 用 ， 是 不 是 就 
征 让 按钮 链接 等 变 为 手 形 ? 类 似 这 样 : 


.button { 
cursor: pointer; 


是 不 是 其 他 属性 值 都 没 怎么 使 用 ? 如 何 真 是 这 样 ， 那 可 真 就 遗憾 
了 ， 因 为 cursor 属 性 要 远 比 你 想 得 丰 富 与 实用 得 多 。 


cursor 属 性 值 几乎 可 以 认为 是 当下 支持 的 关键 字 属 性 值 最 多 的 
CSS 属 性 ， 没 有 之 一 。 下 面 就 是 按照 功能 特性 对 其 进行 的 分 类 以 及 具 
体 解 释 描 述 。 

1. 常规 


。 Cursor:auto: cursor 默认 值 。auto 表 示 光 标 形状 根据 内 容 类 
别 浏览 妖 目 动 进行 处 理 。 例 如 ， 输 入 框 里 面 光 标 表现 为 
cursor:text， 带 href 属 性 的 链接 表现 为 cursor :pointer， 
而 原生 的 <button> 表 现 为 cursor :default 等 。 
cursor:default: 系统 默认 光标 形状 。 虽 然 有 “默认 ”之 意 ， 
但 却 不 是 cursor 属 性 的 默认 值 ， 需 要 注意 。 其 大 致 长 这 个 样 

子 : S。 如 何 严格 按照 操作 系统 以 及 浏览 器 默认 的 光标 行为 呢 ? 目 
前 Web 页 面 中 所 有 按钮 都 使 用 cursor :pointer 手 形 的 做 法 并 不 
标准 ， 链 接 才 是 手 形 ， 按 钮 应 该 都 是 默认 形 ， 通 过 hover 时 候 的 
状态 变化 让 用 户 知 道 这 里 是 可 以 点 击 、 可 以 有 交互 的 。 但 是 如 下 
一 些 情况 的 存在 ， 导 致 业内 都 习惯 把 所 有 可 点 击 、 可 交互 的 元 素 
的 光标 全 部 变 成 手 形 。 

o。 乓 记 设 置 hover 样 式 或 者 不 方便 设置 ， 例 如 ， 图 标 hover 变 
色 效 果 ， 需 要 多 份 不 同色 背景 图 ， 尤 其 现在 都 喜欢 使 用 工具 
合并 ， 默 认 生 成 的 CSS 是 没有 hover 样 式 的 ， 需 要 自己 特殊 
处 理 。 此 时 ， 如 果 这 个 图 标 按钮 采用 默认 default 光 标 ， 容 
易 让 用 户 觉得 这 里 是 不 可 点 击 的 ， 但 是 使 用 pointer 手 形 光 
标 ， 由 于 光标 变化 本 身 就 是 一 种 hover 状 态 变 化 ， 可 以 让 用 
户 意 识 到 这 个 元 素 是 “特别 的 ”。 同 样 地 ， 反 过 来 ， 模 拟 按钮 


的 禁用 效果 的 时 候 ， 也 要 记得 把 cursor :pointer 还 原 成 
cursor:default， 很 多 人 都 不 注意 这 个 细节 。 

o。 由 于 浏览 器 原生 的 按钮 样式 兼容 方面 难以 完美 ， 尤 其 在 下 盛 
行 的 年 代 ， 黑 框 、 宽 高 不 一 致 等 一 系列 样式 问题 层 不 出 穷 ， 
于 是 大 家 就 使 用 <a> 标 签 来 模拟 按钮 ， 类 似 这 样 : 


<a href="javascript:" class="button" role="button"> 按 钮 </a> 


而 浏览 器 中 默认 带 href 属 性 的 <a> 标 签 的 光标 都 是 手 形 ， 而 且 这 
个 手 形 效 果 也 蛮 好 ， 没 有 必要 再 额外 重 置 为 defau1lt 默 认 形 。 于 是 ， 
和 久而久之， 大 家 就 约定 俗 成 ， 所 有 链接 和 按钮 都 使 用 手 形 。 以 至 于 发 
展 到 现在 ， 使 用 原生 的 <button> 按 钮 甚至 下 拉 框 的 时 候 ， 都 要 设置 
一 个 cursor :pointer。 这 种 奇怪 的 发 展 史 真是 比 小 说 还 精彩 。 


。 cursor:none : 这 个 声明 非常 有 意思 ， 可 以 让 光标 隐藏 不 见 。 
什么 情况 下 我 们 不 需要 光标 呢 ? 看 视频 的 时 候 ， 尤 其 全 屏 看 视频 
的 时 候 。 此 时 鼠标 一 直 在 界面 上 晃 着 ， 是 很 碍 眼 、 很 难受 的 。 一 
般 可 以 这 么 处 理 : 如 果 鼠 标 静 止 3 秒 不 动 ， 就 设置 页 面 或 视频 元 素 
cursor:none 隐 藏 光 标 ， 如 果 有 mousemove 行 为 ， 再 显示 即 
可 ! 


然而 这 样 做 有 一 个 小 问题 ， 就 是 IE8 浏 贤 絮 并 不 文 持 
cursor:none 声 明 ， 从 下 9 浏览 器 才 开始 文 持 这 个 属性 ， 怎 么 办 呢 ? 
很 简单 ，IE8 浏 览 器 使 用 自 定 义 的 透明 光标 就 可 以 了 。 弄 一 张 纯 透 明 的 
PNG 图 片 ， 然 后 制作 成 cur 格 式 ， 就 可 以 实现 全 部 浏览 器 下 的 光标 隐 
藏 效果 了 。 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/11/2-1.php。 


CSS 代 码 如 下 : 


,CUr-none { 
cursor: urili(transparent.cur), auto; 


:root .cur-none { 
cursor: none; 


:root 是 IE9 及 以 上 版 本 浏 贤 絮 才 认 识 的 选择 絮 ， 因 此 可 以 把 IE8 
和 其 他 浏览 器 区 分 开 。 


2. 链接 和 状态 


。 Cursor:pointer: 光标 表现 为 一 只 伸 出 食指 的 手 ， 类 似 这 
样 : 由。 下 浏览 器 还 支持 cursor :hand， 表 现 和 
cursor :pointer 是 一 样 的 ， 但 其 他 浏览 器 并 不 识别 ， 因 此 没有 
任何 使 用 cursor :hand 的 理由 。 我 以 前 其 实 产生 过 疑问 : 为 
何 “ 手 形 * 不 统一 是 cursor :hand? 这 样 通俗 易 懂 又 好 记 。 后 来 算 
是 明白 了 ，hand 这 个 词 太 概 括 和 禾 统 ， 随 着 CSS 发 展 ， 一 定 会 出 
现 其 他 与 手相 关 的 形状 ， 例 如 ， 抓 取 相 关 的 grab 和 grabbing 
等 。 

。cursor:help: 帮助 ， 通 常 是 光标 头 上 带 了 个 问号 ， 类 似 这 
样 : %。 它 用 在 帮助 链接 或 者 包含 提示 信息 的 问号 小 图 标 上 。 目 
前 ， 类 似 场景 几乎 都 使 用 cursor :pointer 手 形 ， 实 际 上 ， 可 以 
试 试 使 用 cursor :helLp， 让 我 们 的 交互 细节 和 视觉 硅 现 更 加 细 
不 ， 让 用 户 感 受到 我 们 在 产品 上 的 用 心 。 


。 cursor:progress: 表示 进行 中 的 意思 。 从 语义 上 讲 ， 其 适合 
loading 处 理 。 例 如 ， 我 们 点 击 一 个 按钮 发 送 请 求 ， 请 求 发 送出 
去 、 返 回 数据 还 没 接收 到 的 这 段 时 间 其 实 就 是 一 个 progress 状 
态 。 按 道理 讲 ， 可 以 让 按钮 的 光标 变 成 cursor :progress， 例 
如 ，Windows 7 系统 下 的 会 有 一 个 不 集 旋 转 的 圈 圈 。 但 是 我 个 人 
更 建议 对 按钮 本 身 的 样子 进行 改变 ， 例 如 ， 加 个 菊花 加 载 效 果 ， 
让 用 户 感知 到 目前 正在 处 理 中 ， 因 为 用 户 的 交互 操作 不 一 定 通 过 
鼠标 ， 也 有 可 能 通过 键盘 ， 如 果 单 纯 使 用 cursor:progress,， 
通过 键盘 操作 的 用 户 就 无 法 感知 到 状态 的 变化 ， 用 户 体验 其 实 是 
不 好 的 。 


但 是 ， 有 一 个 场景 却 非常 适合 使 用 cursor :progress， 那 就 是 
页 面 加 载 的 时 候 。 如 今 进行 Web 开 发 ， 没 有 JavaScript 几 乎 寸步 难 行 ， 
而 JavaScript 加 载 完 毕 是 需要 一 定时 间 的 ， 网 络 不 好 的 时 候 ， 这 个 加 载 
时 间 延 迟 可 能 会 非常 明显 ， 于 是 用 户 就 会 遇 到 明明 界面 已 经 呈现 了 ， 
但 是 点 击 “ 展 开 更 多 ”按钮 却 没有 任何 反应 ， 原 因 就 是 JavaScript 还 没有 
完全 加 载 完毕 。 此 时 就 非常 适合 cursor :progress 出 马 了 ， 我 们 默 
认 在 <body> 标 签 上 设置 : 


body { 
cursor:progress 


} 


然后 ， 当 JavaScript 初 始 化 完毕 的 时 候 ， 执 行 类 似 下 面 的 JavaScript 
代码 : 


document .body.style.cursor = 'auto'; 


于 是 ， 刚 才 的 加 载 场景 就 变 成 了 这 样 : Web 页 面 界面 已 经 呈现 ， 
用 户 想 去 点 击 “ 展 开 更 多 ”按钮 ， 结 果 发 现 此 时 页 面 的 光标 是 
cursor:progress 的 转圈 圈 状 态 ， 此 上 时， 至少 大 部 分 用 户 会 意识 到 
我 们 的 网 页 还 没有 完全 加 载 完毕 ， 需 要 再 耐心 等 待 一 会 儿 ， 减 少 了 点 
击 “ 展 开 更 多 ”按钮 却 没 有 任何 反应 的 不 安 和 焦 虚 感 ， 对 用 户 更 加 友好 
下 


。 cursor:wait: 我 们 先 看 看 光标 形状 ， 可 能 是 co 这 样 的 转圈 圈 ， 
或 者 是 沙漏 或 者 是 表 ， 总 之 和 电脑 死机 时 候 的 光标 是 一 样 的 。 
此 ， 请 不 要 在 Web 开 发 的 时 候 使 用 cursor :wait 光标， 以免 引 起 
用 户 不 必要 的 恐慌 。 就 算 真 的 不 响应 了 ， 浏 览 器 自己 也 会 处 理 ， 
我 们 无 须 多 此 一 举 。 

cursor:context-menu: cursor:context-menu 兼容 性 比较 复 
杂 ，Mac OS X 和 Linux 系 统 下 的 Chrome 和 Firefox 浏 蜗 器 是 支持 

的 ， 但 是 Windows 系 统 下 的 Chrome 和 Firefox 浏 唤 嚣 却 不 支持 。 


在 Windows 7 系统 下 ， 表 现 为 箭头 光标 右 下 方 挂 了 个 汽油 桶 Na。 


context -menu 的 字面 意思 是 “上 下 文 菜单 ”， 就 是 右键 点 击 我 们 
的 桌面 或 者 网 页 显示 的 那个 菜单 列表 。 如 果 套 用 这 个 语义 ， 
cursor:context- menu 适 用 的 场景 是 自 定 义 “ 上 下 文 菜单 ”的 时 
候 ， 例 如 ， 网 盘 列 表 或 者 邮箱 列表 ， 我 们 可 以 直接 右键 删除 ， 如 图 11- 
8 所 示 。 
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图 11-8 ”邮箱 列表 右键 自 定义 上 下 文 菜单 示意 


此 时 ， 如 果 我 们 把 光标 设置 为 cursor :context-menu， 用 户 就 
更 容易 意识 到 这 里 有 自 定 义 的 、 快 捷 方 便 的 上 下 文 菜 单 功能 ， 而 不 是 
傻 傻 指望 用 户 自己 发 现 。 
3. 选择 
。 cursor :text: 潜台词 是 文字 可 被 选中 ， 形 状 类 似 1。 默 认 文 本 
字符 或 者 可 输入 的 单 复 选 框 的 光标 就 表现 成 这 样 ， 因 为 文字 可 以 
被 选中 ;， 反 过 来 ， 如 果 文 字 是 不 能 被 选中 的 ， 光 标 就 不 应 该 是 


CUrSor :teXt。 


举 个 例子 ， 单 行 输 入 框 ， 默 认 光 标 表 现 为 cursor :text， 但 是 
我 们 一 旦 让 其 disabled 禁 用 ， 如 <input disabled>， 则 浏览 器 自 
动 会 把 光标 改变 成 cursor : default， 如 图 11-9 所 示 。 


R 


图 11-9 ”输入 框 茜 用 时 的 光标 示意 


同样 地 ， 如 果 我 们 使 用 CSS 让 页 面 上 的 文本 字符 不 能 被 选中 ， 则 
光标 也 要 跟着 一 起 发 生变 化 ，CSS 代 码 如 下 : 


article { 
-webkit-user-select: none; 
-moz-usSer-select: none; 
-ms-user-select: none; 


user-select: none; 


cursor: default,; 


} 


user-select :none 声 明 可 以 让 现代 浏览 器 下 的 文本 不 能 被 选 
中 ， 这 个 很 多 人 都 知道 ， 但 是 这 些 人 却 没 注 意 到 要 设置 
cursor:default， 因 为 设置 了 user-select:none 的 文本 其 光标 
依然 表现 为 cursor :text， 显 然 语义 和 表现 就 不 符合 了 ， 明 明 呈 现 
的 是 可 选中 文本 的 光标 ， 结 果 文 本 却 选 不 了 。 因 此 不 要 忘记 顺便 加 个 


cursor:default°。 


。cursor:vertical-text: 洪 台 词 是 文字 可 以 垂直 选中 ， 形 状 
类 似 -。 当 我 们 使 用 writing-mode 把 文字 排版 从 水 平 改 为 垂直 
的 时 候 ， 文 他 的 光标 就 目 动 表现 为 cursor :vertical-text。 
换 句 话说 ，cursor :vertical-text 就 是 给 垂直 文字 排 板 用 
的 ， 平 常 的 项 目 开 发 很 难 有 机 会 用 到 。 

。cursor:crosshair: 十 字 光 标 ， 形 状 类 似 +。 它 通常 用 在 像素 
级 的 框 选 或 点 选 场合 ， 比 方 说 自 定义 的 取 色 工具 ， 如 图 11-10 所 
起 

。 Cursor :cel1: cursor:cell 中 的 cell 和 和 display:table-cell 
中 的 ce11 其 实 可 以 看 成 是 同一 个 东西 ， 也 就 是 单元 格 。 换 句 话 
说 ，cursor :cell 用 来 表示 单元 格 是 可 以 框 选 的 ， 形 状 类 似 吕 。 
有 没有 觉得 很 眼熟 ? 没 错 ， 此 光标 为 Excel“ 御 用 ”光标 ， 如 图 11-11 
所 示 。 
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图 11-10 取 色 工具 使 用 十 字 光 标点 选 颜色 示意 
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图 11-11 Excel 中 的 cursor :cell 光 标 


这 下 大 家 应 该 就 知道 cursor :ce11 适 合 在 哪 种 场景 下 使 用 了 
吧 


原生 的 IE8 浏 览 器 并 不 支持 cursor :cell1， 若 使 用 ，IE8 需 要 自 定 
义 。 


4. 拖 电 


。 cursor :move: 光标 变 成 cursor :move， 人 往往 就 意味 着 当前 元 
素 是 可 以 移动 的 ， 形 状 类 似 令 。 例 如 ， 头 像 剪 裁 的 时 候 可 能 需要 
拖 动 剪 裁 框 或 背景 图 ， 就 可 以 设置 cursor :move， 或 者 有 些 弹 
框 组件 按 住 标 题 栏 是 可 以 拖 忠 的 ， 我 们 就 可 以 在 标题 栏 上 设置 
cursor :move， 让 用 户 很 直观 地 知道 当前 弹 框 是 可 拖 虑 的 ， 降 
低 用 户 的 学 习 成 本 ， 还 是 很 有 使 用 价值 的 。 


。 cursor:copy: 光标 变 成 cursor :copy， 往 往 就 意味 着 当前 元 
素 是 可 以 被 复制 的 ， 形 状 类 似 *。 原 生 的 IE8 浏 览 器 并 不 支持 ， 若 
使 用 ，IE8 需 要 自 定 义 。 

。cursor:alias: 光标 变 成 cursor :alias， 往 往 就 意味 着 当前 
元 素 是 可 以 创建 别名 或 者 快捷 方式 的 ， 形 状 类 似 g。 原 生 的 正 8 浏 
览 器 并 不 支持 ， 若 使 用 ，IE8 需 要 自 定义 。 

。 cursor:no-drop: ”光标 变 成 cursor :no-drop， 往 往 就 意味 
着 当前 元 素 放 开 到 当前 位 置 是 不 允许 的 。 如 果 深 究 其 光标 表现 ， 
应 该 类 似 如 图 11-12 所 示 这 般 。 但 实际 上 ， 浏 览 器 的 真实 表现 是 和 
cursor :not-allowed 一 模 一 样 的 。 

。Ccursor :not-allowed: 光标 变 成 cursor :not-allowed,， 
往往 就 意味 着 当前 行为 是 禁止 的 ， 形 状 类 似 S。 有 一 些 人 会 给 禁 
用 态 按钮 设置 cursor :not-allowed， 其 本 身 出 发 点 是 好 的 ， 
表示 当前 按钮 禁止 访问 (不 允许 点 击 ) ， 似 乎 也 说 得 通 ， 但 其 实 
是 不 合适 的 ， 因 为 cursor :not-allowed 并 不 是 常规 光标 状 
态 ， 而 是 与 拖 忠 行为 相关 的 ， 它 应 该 是 一 种 主动 行为 下 的 光标 表 
现 。 例 如 ，Chrome 浏 览 絮 下 ， 我 们 在 网 页 上 拖 忠 一 张 图 片 ， 其 光 
标 表现 如 图 11-13 所 示 。 因 此 ， 禁 用 按钮 光标 还 是 使 用 cursor: 
default 更 合适 ， 然 后 通过 样式 变化 让 用 户 一 眼 就 看 得 出 来 现在 
按钮 是 不 可 点 击 的 。 


R 


S 


图 11-12 ”系统 自 带 的 drop 无 效 光 标示 意 


图 11-13” Chrome 浏览 器 下 图 片 拖 忠 无 效 时 的 光标 表现 
.滚动 
。Ccursor:all-scroll: 表示 上 下 左右 都 可 以 滚动 ， 但 有 一 个 很 


糟糕 的 问题 ，Windows 系 统 下 光标 表现 和 cursor :move 一 样 。 再 
考 虚 到 本 里 作 用 场景 局 限 ， 我 觉得 可 以 忽略 此 声明 。 


6. 拉 伸 
。 cursor:col-resize: 光标 形状 类 似 “*。 它 适用 于 移动 事 直 线 
条 ， 如 垂直 参考 线 。 如 果 要 通过 移动 改变 左右 分 栏 的 宽度 ， 建 议 
使 用 cursor:ew-resize。 
。 cursor :row-resize: 光标 形状 类 似 4。 它 适用 于 移动 水 平 线 
条 ， 如 水 平 参考 线 。 如 果 要 通过 移动 改变 上 下 分 栏 的 高 度 ， 建 议 
使 用 cursor:ns-resize。 


(1) 单 向 拉 伸 : 总共 8 个 方位 8 个 不 同 的 关键 字 属 性 值 ， 名 称 和 近 


似 形状 如 下 。 


cursor:n-resize， 理 应 是 一 个 朝 上 的 单 篆 涉 ， 但 通常 是 双 癌 


的 表现 ?。 
cursor:e-resize， 理 应 是 一 个 朝 右 的 单 第 涉 ， 但 通常 是 双 问 
的 表现 。。。 
cursor:s-resize， 理 应 是 一 个 朝 下 的 单 第 涉 ， 但 通常 是 双 问 
的 表现 ?1。 
cursor:w-resize， 理 应 是 一 个 朝 左 的 单 箭头 ， 但 通 冲 是 双 回 
的 表现 ~ 。 


cursor:ne-resize， 理 应 是 一 个 朝 右 上 角 的 单 第 涉 ， 但 通常 
是 双向 的 表现 "。 
cursor:nw-resize， 理 应 是 一 个 朝 左 上 角 的 单 箭 头 ， 但 通常 
是 双向 的 表现 。 
cursor:se-resize， 理 应 是 一 个 朝 右 下 角 的 单 箭 头 ， 但 通常 
是 双 癌 的 表现 。 
cursor:sw-resize， 理 应 是 一 个 朝 左 下 角 的 单 箭 头 ， 但 通常 
是 双向 的 表现 "。 


(2) 双向 拉 伸 : 总共 4 个 对 立方 位 组 合 ， 名 称 和 近似 形状 如 下 。 


cursor:ew-resize: .一 。 
cursor:ns-resize: i. 
cursor:nesw-resize: /2° 


cursor:nwse-resize: “~.。° 


双 辣 拉 伸 的 4 个 属性 值 从 焉 10 才 开始 支持 。 考 虚 到 单 向 拉 伸 往往 会 
目 动 以 双向 的 形式 呈现 ， 因 此 ， 实 际 开发 的 时 候 ， 我 们 大 可 这 么 处 
理 ， 拿 右 下 角 拉 伸 示 意 : 


.resize { 
cursor: se-resize,; 


cursor: nwse-resize; 


这 样 ， 即 使 有 些 环境 单 向 拉 伸 就 只 有 一 个 方向 的 箭头 ， 有 后 面 的 
cursor :nwse-resize 童 着， 也 不 会 出 现 什么 明显 的 样式 问题 。 


7. 缩放 
。 Cursor:zoom-in: 光标 形似 放大 镑 @&。 
。 Cursor:zoom-out: 光标 形似 缩小 镜 & 。 
这 是 CSS3 新 支持 的 两 个 光标 类 型 。 
8. 抓 取 
。cursor :grab: 光标 是 一 个 五 指 张 开 的 手 邓 。 
。 cursor:grabbing: 光标 是 一 个 五 指 收 起 的 手 @。 
这 也 是 CSS3 新 支持 的 两 个 光标 类 型 。 


或 许 是 因为 操作 系统 并 不 存在 这 样 的 光标 类 型 ， 不 同 浏览 右 下 这 
个 “五 指 张 开 / 收 起 的 手 ” 的 形状 还 是 有 些 关 异 的 ， 而 其 他 比较 传统 的 光 
标 则 完全 一 致 ， 并 且 都 和 操作 系统 的 光标 一 模 一 样 。 


最 后 ， 再 总 结 一 下 琳琅 满目 的 cursor 属 性 值 的 兼容 性 情况 ( 数 


据 源 自 caniuse.com) 。 


可 以 放心 使 用 ， 无 须 担心 兼容 性 问题 的 cursor 属 性 值 有 auto、 
crosshair 、default ~、 move、 text ~wait 、 help、n- 
resize 、e-resize、s-resize 、w-resize 、 ne-resize、 
nw-resize、se-resize、 sw-resize 、 pointer、 
progress 、 not-allowed、 no-drop 、 vertical-text、 
all-scroll、 col-resize 和 row-resize。 

从 IE9 浏 览 器 才 开 始 支 持 的 属性 值 有 none、alias、cell、 
copy 、 ew-resize 、 ns-resize 、 nesw-resize 、 Nwse- 
resize 和 context-menu。 

从 Edge12 才 开始 支持 的 属性 值 有 zoom-in 和 zoon-out。 

从 Edge14 才 开始 支持 的 属性 值 有 grab 和 grabbing ( 源 自 MDN 
文档 ) 。 


11.2.2” 自 定义 光标 


从 IE6 开 始 ， 我 们 避 ® 可 以 目 定 义 网 页 中 的 光标 样式 ， 因 此 ， 对 于 


cursor 属 性 ， 兼 容 性 都 不 是 问题 。 例 如 ，IE8 不 支持 上 面 提 到 的 
cursor :none， 就 是 通过 自 定义 手段 实现 兼容 的 : 


.CuUr-none { 
cursor: url(transparent.cur); 


对 于 Chrome 等 浏 唤 絮 ， 可 以 直接 使 用 PNG 图 片 作为 光标 ， 但 是 下 
浏览 右 不 行 。 正 仅 文 持 专 门 的 .cur 格 式 的 光标 文件 ， 需 要 使 用 工具 进 
行 格式 转换 ， 至 于 什么 工具 ， 大 家 可 以 目 行 搜索 一 下 ， 还 是 有 很 多 
的 。 


解决 兼容 性 问题 只 是 自 定 义 光 标的 作用 之 一 ， 目 定义 光标 最 大 的 
作用 其 实 是 根据 业务 需要 对 光标 进行 更 为 彻底 的 目 定 义 ， 最 常见 的 就 
是 点 击 图 片 左右 半 区 ， 分 别 实现 上 一 张 、 下 一 张 图 厂 切 换 预 金 的 效 
果 ， 如 图 11-14 所 示 。 


图 11-14 上 自 定义 光标 在 图 片 预 咒 交 互 中 的 应 用 示意 


目 定义 光标 很 实用 ， 但 要 讲解 的 知识 点 不 多 ， 束 不 过 多 展开 了 。 


第 12 章 ”流向 的 改变 


在 现实 世界 中 ， 太 了 站 总 是 东升 西 落 ， 水 总 是 从 高 往 低 流 ， 这 似乎 
忠 古 永恒 不 变 的 规律 。 人 在 理解 抽象 知识 的 时 候 习 惯 与 现实 世界 相映 
射 ， 于 是 会 有 人 认为 CSS 世 界 中 的 内 容 目 左 往 右 、 目 上 而 下 排列 也 十 
永恒 不 变 的 。 实 际 上 ，CSS 世 界 流 癌 是 可 以 轻易 进行 磊 覆 和 改变 的 。 


12.1 ”改变 水 平流 癌 的 dijrection 


至 少 在 我 接触 的 这 么 多 项 目 里 ， 没 有 见 到 有 谁 使 用 过 CSS 的 
direction 属 性 。 


为 什么 呢 ? 是 因为 direction 长 得 丑 吗 ? 虽然 说 direction 确 
其 貌 不 扬 ， 但 是 CSS 世 界 不 会 有 这 样 的 歧视 。 


那 是 因为 兼容 性 吗 ? 更 不 是 了 ，direction 早 在 IE6 时 代 就 已 经 
被 支持 了 ， 其 兼容 性 见 表 12-1。 


表 12-1 direction 属 性 兼容 性 表 


EE 


那 完 葛 是 什么 原因 呢 ? 


我 认为 多 半 是 因为 宣传 不 够 。 要 是 所 有 前 端 人 能 够 人 手 一 本 这 本 
书 ， 目 然 束 不 会 有 这 样 的 问题 了 ， 因 为 本 书 热衷 于 挖掘 CSS 属 性 的 潜 
力 ， 可 以 让 那些 默 稚 无 闻 但 有 能 力 的 CSS 属 性 烧烤 生 辉 、 焕 发 青春 。 
direction 吏 是 一 个 典型 ， 该 属性 简单 且 好 记 ， 属 性 值 少 ， 兼 容 性 
好 ， 关 键 时 候 省 心 省 力 。 


12.1.1 direction 简 介 


基本 上 ， 大 家 只 要 关心 下 面 这 两 个 属性 值 就 好 了 : 


direction: Jtr; //#¥ 


direction: rtl; 


其 中 ，1tr 是 初始 值 ， 表 示 left-to-right， 就 是 从 左 往 右 的 意思 。 目 前 东 
亚 以 及 欧美 文字 书写 束 是 从 左 往 右 的 ，rtl1 表 示 right-to-left， 束 古 从 厂 
往 左 的 意思 。 阿 拉 伯 语 (Arabic) 、 硕 伯 来 语 (Hebrew) 等 的 书写 就 
是 从 右 往 左 的 ， 也 就 是 说 ，direction 设 计 的 本 意 其 实 是 为 了 兼顾 这 


类 语言 。 


但 是 ，Web 开 发 接触 多 语言 的 场景 其 实 非常 有 限 ， 但 这 其 实 并 不 
妨碍 direction 属 性 在 实际 项 目 中 的 应 用 ， 因 为 direction 改 变 水 
平流 癌 的 特性 在 网 页 布局 的 时 候 非常 有 用 。 


direction 属 性 默认 有 这 么 一 个 特性 ， 即 可 以 改变 蔡 换 元 素 或 者 
inline-block/ inline-tab1le 元 素 的 水 平 呈 现 顺 序 。 举 个 例 
子 ， 使 用 如 下 HTML: 


<p dir="rtl"> 
<img src="1.jpg"” alt=" 美 女 "> 


<img SrTC="2., j pg" alLt=" 美 景 "> 
</p> 


美女 图 片 DOM 市 点 在 美景 图 片 的 前 面 ， 如 采 我 们 忽略 父 级 元 素 ， 是 不 
征 页 面 择 现 的 时 候 应 该 顽 女 图 片 在 前 面 ， 类 景 图 片 在 后 面 ? 但 是 这 里 
择 现 的 顺序 却 是 反 的 ， 闫 景 图 片 显示 在 了 美女 图 片 的 前 面 ， 如 图 12-1 
所 过 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/12/1-1.php 或 者 扫 下 面 
的 二 维 码 。 


图 12-1 direction:rt1L 下 的 图 片 呈现 顺序 


这 种 特性 表现 对 我 们 实际 开发 有 什么 作用 呢 ? 作用 就 是 我 们 可 以 
兵 不 血 尺 地 改变 元 陛 的 水 平 呈现 顺序 。 举 个 例子 ， 我 们 要 写 一 款 
confirm 确 认 框 组 件 ， 需 要 同时 兼容 时 面 喘 和 移动 端 。 在 桌面 端 三 现 
的 时 候 , “确认 ”按钮 是 在 左边 ,“ 了 取消” 按钮 是 在 右边 ， 如 图 12-2 所 
示 。 如 末 移 动 并 访问 ， 为 了 我 们 手指 点 击 方便 ， 产品 经 理 布 望 “ 确 
认 ” 按 钮 在 右边 ， 而 “取消 ”按钮 在 左边 ， 如 图 12-3 所 示 。 


图 12-2 桌面 端 


图 12-3 ”移动 端 


请 问 : 如 果 你 来 实现 ， 你 会 如 何 处 理 这 种 不 同 设备 、 不 同 按钮 顺 
序 的 问题 呢 ? 


如 果 按 钮 右 对 齐 ， 我 们 还 可 以 使 用 浮动 float :right 来 解决 ， 
但 是 现在 的 关键 问 题 是 按钮 是 大 中 对 齐 的 ， 别 说 浮动 了 ， 飞 动 都 满足 
不 了 需求 。 一 番 思 考 后 ， 你 发 现 没什么 思路 ， 是 不 是 又 会 去 求助 万 能 
的 JavaScript， 根 据 设 备 改变 按钮 元 素 在 DOM 流 中 的 顺序 了 ? 


别 上 圈 折腾 啦 ! 有 请 名 不 见 经 传 的 direction 属 性 出 场 ! 直接 一 行 
direction'rt1， 十 几 个 字母 ， 按 钮 顺序 就 会 目 动 反 转 ， 兼 容 性 
好 ， 代 码 又 少 ， 我 敢 打包 票 ， 这 一 定 是 性 价 比 最 高 的 方法 ! 


@media screen and (max-width: 480px) { 


.dialog-footer { direction: rtl; } 


当然 ，direction 属 性 的 作用 远 不 止 这 些 。 通 常 ， 我 们 让 单行 
字 瘤 出 用 点 显示 ， 这 个 点 通常 都 是 在 右边 的 ， 省 略 的 都 是 最 后 的 文 
字 ， 配 合 direction 属 性 ， 我 们 可 以 让 这 个 点 打 在 开头 ， 让 前 面 的 文 
字 省 略 ，CSS 和 HTML 代 码 如 下 : 
,el { 
width: 240px; 
white-space: nowrap 


text-overflow: ellipsis; 
overflow: hidden; 


<p class="ell" dir="1ltr"> 玫 ; 
<p class="ell" dir="rt1"> 开 > 


HTML 代 码 中 的 dir 属 性 和 CSS 中 direction 属 性 作用 一 样 ， 使 
用 HTML 属 性 是 为 了 方便 测试 。 效 采 如 图 12-4 所 示 。 眼 见 为 实 ， 手 动 
输入 http://demo.cssworld.cn/12/1-2.php 或 者 扫 下 面 的 二 维 码 。 


~ 


生 值 下 的 文字 溢出 打点 效果 


图 12-4 ”不同 dijrection 属 ' 


这 种 开头 打点 的 效果 在 有 些 场合 非常 有 用 。 比 方 说 ， 我 们 的 动态 
文字 后 面 跟 了 一 些 标记 性 的 图 标 ， 如 果 后 面 打 点 ， 就 很 容易 把 这 些 需 
要 呈现 的 图 标 一 并 变 成 点 ， 于 是 我 们 不 得 不 给 文字 套 一 层 标 签 并 借助 
max-width 来 只 让 文字 打点 ， 那 可 是 相当 麻烦 的 。 但 有 了 
direction 属 性 ， 有 了 前 置 打点 ， 事 情 束 简单 多 了 ， 只 要 配合 text- 
align:1left 控 制 下 ， 就 完全 不 用 担心 后 面 的 标记 性 的 图 标 会 被 隐藏 
掉 啦 ! 


direction 属 性 还 可 以 轻松 改变 表格 中 列 的 呈现 顺序 。 例 如 ， 我 
们 对 表 12-1 设 置 一 个 direction:rtl， 就 会 变 成 表 12-2 所 示 的 这 样 ， 
原本 第 一 列 的 Chrome 跑 到 最 后 了 。 


表 12-2 ”改变 了 direction 属 性 值 后 的 CSs direction 属 性 兼容 性 表 


directionL:rtl 还 可 以 让 text-justify 两 端 对 齐 元 素 ， 最 
后 一 行 落 单 的 元 素 右 对 齐 显 示 。 例 如 ， 使 用 下 面 的 CSS 和 HTML: 


四 3 


pt 
text-align: justify; 
direction: rtl; 
} 
<p> 
<img src="1.jpg"> 
<img src="1.jpg"> 
<img src="1.jpg"> 
</p> 


结果 如 图 12-5 所 示 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/12/1-3.php 或 者 扫 下 面 的 二 维 码 。 


图 12-5 direction:rtl 时 text-justify 最 后 一 行 右 对 齐 


只 要 是 内 联 元 素 ， 只 要 与 书写 流 相 天 ， 都 可 以 试 试 direction 属 
人 


对 了 ， 还 有 一 个 小 点 值得 一 提 。 在 不 文 持 text- 
align:start/end 的 浏 唤 器 中 (如 I 下) ， 不 同 的 direction 属 性 值 
会 改变 text-align 属 性 的 初始 值 ， 当 direction 值 为 ]tr 的 时 候 ， 
text-align 的 初始 值 是 left; 当 direction 值 为 rt1 的 时 候 ， 
text-align 的 初始 值 是 right。 


12.1.2 _ direction 的 黄金 搭档 unicode-bidi 


细心 的 读者 可 能 注意 到 了 ，direction 属 性 似乎 只 能 改变 图 片 
或 者 按钮 的 呈现 顺序 ， 但 对 纯 字 符 内 容 〈 尤 其 中 文 ) 好 像 并 没有 什么 
效果 ， 但 实际 上 ， 我 们 也 是 可 以 指定 中 文 每 个 字符 都 反 向 呈现 的 ， 方 
法 就 是 借助 direction 的 搭档 属性 unicode-bidi。 


单 看 unicode-bidi 的 名 称 ， 你 可 能 会 觉得 有 点 儿 怪 ， 会 觉得 它 
可 能 是 哪个 浏览 絮 私 有 的 属性 ， 实 际 上 不 是 的 ，unicode-bidi 是 一 


个 所 有 浏览 器 都 支持 的 良好 的 CSS 属 性 。 至 于 它 为 什么 会 有 这 么 奇怪 
的 名 称 ， 我 这 里 解释 一 下 ， 你 可 以 把 unicode 理 解 为 “字符 集 *， 而 
bidi 则 是 单词 bpidirectionality 的 简写 ， 中 文 意思 是 “双向 性 ”。 
网 页 中 的 字符 很 多 时 候 是 混合 的 ， 例 如 中 文 和 英文 夹杂 ， 或 者 阿拉 但 
文 和 英文 夹杂 ， 此 时 就 会 出 现 文本 阅读 方向 不 一 样 的 情况 ， 阿 拉 伯 文 
是 从 右 往 左 读 ， 英 文 是 从 左 往 右 ， 而 这 种 混合 方向 同时 出 现 的 现象 就 
称 为 “双向 性 ”"， 因 此 unicode-bidi 作 用 就 是 明确 字符 出 现 “ 双 向 
性 ?时 应 当 有 的 表现 。 


unicode-bidi 兼 容 性 比较 好 的 几 个 属性 值 如 下 : 


unicode-bidi: normal; // 老 


unicode-bidi: embed; 
unicode-bidi: bidi-override; 


现 有 的 对 unicode-bidi 这 几 个 属性 值 的 解释 几乎 都 是 蜀 深 难 懂 
的 ， 我 在 这 里 给 出 一 个 通俗 易 懂 的 解释 。 
(1) normal: 正常 排列 。 假 设 设置 了 direction:rt1L， 则 图 


片 、 按 钮 以 及 问号 、 加 瑟 之 类 的 字符 会 从 右 往 左 显 示 ， 但 是 中 文 、 英 
文字 符 还 是 从 左 往 右 显示 。 


(2) embed: embed 属 性 值 要 想起 作用 ， 只 能 作用 在 内 联 元 素 
上 。 在 通常 情况 下 ，embed 属 性 值 的 表现 和 normal 是 一 样 的 ， 导 致 
很 多 人 不 明白 embed 到 底 和 normal 有 什么 区 别 。 其 实 它们 的 区 别 很 
简单 ，embed 属 性 值 的 字符 排序 是 独立 内 艇 的 ， 不 受 外 部 影响 。 我 们 
来 看 一 个 例子 ，CSS 和 HTML 如 下 : 


.rtl { 


direction: rtl; 
unicode-bidi: bidi-override; 


} 
,rt > span { 


background-color: #ddd; 


} 


<p class="rt1"> 


头 是 我 ，<span style="unicode-bidi:normal;"> 这 是 中 间 


</span>， 然 后 是 结束 </p> 


<p class="rt1"> 


头 是 我 ，<span style="unicode-bidi:embed;"> 这 是 中 间 


</span>， 然 后 是 结束 </p> 


结果 如 图 12-6 所 示 。 


unicode -bidi:normal 

Ns 
束 结 是 后 然 ， 间 中 是 这 ， 我 是 头 开 
束 结 是 后 然 ， 这 是 中 间 ， 我 是 头 开 
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unicode -bidi:embed 


图 12-6 unicode-bidi:embed 和 unicode-bidi:normal 对 比 


因为 <p> 元 素 设置 了 unicode-bidi:bidi-override， 所 以 会 
强制 所 有 字符 按照 direction 设 置 的 方向 全 部 反问 排列 。 但 是 从 图 
12-6 可 以 看 出 ， 设 置 了 unicode- bidi:normal 的 <span> 元 素 直 接 


受 外 部 的 unicod 


e-bidi 属 性 影响 ， 也 全 部 反问 呈现 了 ,但 是 下 一 行 


设置 了 unicode-bidi:embed 的 “这 是 中 间 ” 四 个 字 反 而 


是 “normal” 排 序 


原因 整 在 于 ， 


[© 


unicode-bidi:embed 会 开启 一 个 看 不 见 的 散 入 


层 ， 然 后 自己 在 里 面 重新 排序 ， 但 unicode-bidi:normal 并 不 会 开 


局 一 个 额外 的 航 入 层 ， 于 是 总 是 受 外 部 的 unicode-bidi 影 响 。 


这 一 对 比 效果 有 对 应 的 实例 页 面 ， 有 兴趣 的 读者 可 手动 输入 
http://demo. cssworld.cn/12/1-4.php 或 者 扫 右 侧 的 二 维 码 。 


embed 属 性 值 的 作用 原理 是 在 元 素 的 开始 和 结束 位 置 插 入 特殊 字 
符 加 以 实现 的 ， 可 以 理解 为 在 元 素 开始 位 置 添 加 了 一 个 U+202A 字 符 
(如 果 direction 值 是 1tr) 或 者 U+202B 字 符 (如 果 direction 值 
是 rt1) ， 并 在 该 元 素 结束 位 置 添 加 了 一 个 U+202C 字 符 。 


因此 ， 实 际 上 我 们 无 须 设置 unicode-bidi:embed， 直 接 在 
<Span> 元 素 前 后 分 别 插入 U+202B 字 符 和 U+202C 字 符 也 可 以 实现 类 
似 的 效果 。 具 体 如 下 : 


<p class="rt1"> 开 头 是 我 ，<span>&#Xx202B,; 这 是 中 间 &#Xx202C;</span>， 然 后 是 


结束 </p> 


本 人 亲 测 有 效 。 


(3) bidi-override: 顾名思义 ，bidi-override 就 是 “ 重 
写 双 回 排 序 规则 ”， 通 常 样 式 表现 为 所 有 的 字符 都 按照 统一 的 
direction 顺 序 排列 ， 例 如 ， 若 设置 direction:rtl， 则 所 有 字符 
都 会 从 右 往 左 反 回 排列 ， 效 果 强 烈 。 


bidi-override 的 作用 原理 也 是 通过 插入 特殊 字符 实现 的 ， 可 
以 理解 为 在 元 素 开 始 位 置 或 者 每 个 匿名 子 级 块 盒 的 开始 位 置 (如 果 有 
的 话 ) 添加 一 个 U+202D 字 符 (如 果 direction 值 是 1tr) 或 者 
U+202E 字 符 (如 果 direction 值 是 rtl) ， 并 在 该 元 素 结束 位 置 添 
加 了 一 个 U+202C 字 符 。 


因此 ， 实 际 上 我 们 无 须 设置 unicode-bidi:bidi-override 
以 及 direction 必 性， 直接 在 元 素 前 后 分 别 插入 U+202E 字 符 和 
U+202C 字 符 〈 可 缺 省 ) 也 可 以 实现 字符 反 向 排列 效果 。 例 如 : 


<p>&#X202E; 一 二 三 四 五 六 七 八 九 十 </p> 


最 后 页 面 至 现 的 文字 藉 是 “十 九 八 七 六 五 四 三 二 一 ”， 还 是 挺 有 意思 
的 。 


规范 文档 中 有 这 么 一 句 话 很 有 意思 : Unicode 算 法 对 磐 入 有 61 层 的 
限制 ， 应 该 注意 尽量 不 要 使 用 值 不 为 normal 的 unicode-bidi， 除 
非 适当 (也 就 是 在 元 素 影响 有 限 的 前 提 下 ) 


unicode-bidi 属 性 虽然 很 有 意思 ， 但 是 改变 字符 的 呈现 顺序 往 
往 和 我 们 的 日 常 需 求 很 难 契 合 ， 因 此 ， 其 出 场 机 会 实际 上 要 比 


direction 低 一 些 ， 但 存在 即 有 价值 ， 总 会 有 场合 非常 适合 使 用 
unicode-bidi 属 性 的 。 


12.2 ”改变 CSS 世 界 纵横 规则 的 writing-mode 


writing-mode 这 个 CSS 必 性， 是 不 是 很 少见 到 、 很 少 用 到 ? 束 
像 我 们 将 不 常见 的 文字 称 为 “ 生 俱 字 "一样 ， 我 们 可 以 把 不 常见 的 CSS 
属性 叫 作 “生僻 属性 ”。writing-mode 给 我 们 的 感觉 就 是 一 个 “生僻 属 
性 ”一 一 很 弱 ， 可 有 可 无 。 


但 是 实际 上 ， 我 们 都 错 了 ， 大 错 特 错 ! writing-mode 可 以 说 是 
CSS 世 界 里 面 最 强大 的 CSS 属 性 了 ， 它 十 本 书 最 后 出 场 的 大 咖 ， 直 接 
由 覆 CSS 世 界 的 众多 规则 。 


writing-mode 之 所 以 给 人 “生僻 ”的 感觉 ， 是 有 原因 的 。 实 际 上 
writing-mode 这 个 CSS 属 性 很 早 就 诞生 了 ，IE5.5 浏 览 器 束 已 经 文 持 


人 


那 就 奇怪 了 ! writing-mode 既 然 这 么 历 害 ， 出 现 的 时 间 早 、 资 
格 老 ， 为 什么 一 直 沉 和 了 差不多 20 年 呢 ? 


中 太 日 已 


那 是 因为 在 很 长 一 段 时 间 里 ，Firefox、Chrome 这 些 现代 浏览 器 都 
不 支持 writing-mode，writing-mode 基 本 上 就 是 下 浏览 器 的 私有 
产物 。 很 多 人 对 下 一 直 没什么 好 感 ， 对 吧 ? 由 此 及 彼 ， 上 自然 对 
writing-mode 也 不 待 见 。 


然而 ， 就 在 我 们 被 流行 前 端 技 术 一 叶 蔽 目的 时 候 ， 各 大 现代 浏览 
器 纷纷 对 writing-mode 实 现 了 更 加 标准 的 文 持 (主要 得 益 于 Firefox 
浏览 器 的 积极 跟 进 ) 。 也 就 是 说 ， 不 知 从 什么 时 候 起 ，writing- 
mode 的 兼容 性 已 经 不 成 问题 了 ， 加 上 该 属性 本 身 特性 强大 一 一 我 仿佛 
看 到 了 一 颗 


12.2.1 writing-mode 原 本 的 作用 


和 float 属 性 有 些 类 似 ，writing-mode 原 本 是 为 控制 内 联 元 素 
的 显示 而 设计 的 ( 即 所 谓 的 文本 布局 ) 。 因 为 在 亚洲 ， 尤 其 像 中 国 这 
样 的 东亚 国家 ， 存 在 文字 的 排版 不 是 水 平 而 是 垂直 的 情况 ， 如 中 国 的 
古诗 文 ， 如 图 12-7 所 示 。 


过 尾 完 习 呵 | | 
- 压 郑 形 盏 蓝 尖 询 
。 莫 取得 才 由 漆 避 
- 副 营 | 如 车 册 巾 


图 12-7 ”上 古诗 竖 版 示意 
因此 ，writing-mode 就 是 用 来 实现 文字 竖 同 呈现 的 。 
1. writing-mode 的 语法 


writing-mode 的 语法 学 习 要 求 比 其 他 CSS 属 性 要 高 一 些 ， 因 为 
我 们 需要 记 住 两 套 不 同 的 语法 : 一 个 是 IE 私有 属性 ， 一 个 是 CSS3 规 范 
属性 。 


先 看 一 下 未 来 所 需 的 CSS3 语 法 : 


/* 关键 字 值 */ 

writing-mode: horizontal-tb; /* 默认 值 */ 
writing-mode: vertical-rl; 

writing-mode: vertical-Jlr; 


/* 全 局 值 一 关键 字 inherit，IE8 及 以 上 版 本 浏览 器 支持 ，initial 和 unset，IE13 才 
支持 */ 

writing-mode: inherit; 

writing-mode: initial; 

writing-mode: unset; 


我 们 通过 名 称 就 能 知道 各 个 关键 字 属 性 值 大 概 的 意思 。 例 如 ， 默 
认 值 horizontal-tb 表 示 文 本 流 是 水 平方 向 (horizontal) 的 ， 元 素 
是 从 上 往 下 (top-bottom) 堆 著 的 。 


vertical-r1 表 示 文 本 是 垂直 方向 (vertical) 展示 ， 然 后 阅读 
的 顺序 是 从 右 往 左 (right-left) ， 和 我 们 阅读 古诗 的 顺序 一 致 。 


vertical-1Lr 表 示 文 本 是 垂直 方向 (vertical) 展示 ， 然 后 阅读 
的 顺序 还 是 默认 的 从 左 往 右 (left-right) ， 即 仅仅 是 水 平 变 垂直 。 


图 12-8 给 出 了 各 个 值 下 的 中 英文 表现 的 对 照 (参考 自 MDN) 由 。 


J 
家 没有 电 |Example ”|1994 年 化 
i 


可 至 
了 
vertical-lr 家 年 艺 
全 会 
一 


图 12-8 writing-mode 和 文本 展示 效果 示意 


下 面 来 看 一 下 老 IE 浏 蜗 絮 的 语法 ， 由 于 历史 原因 ， 其 显得 相当 复 
IE 官 方 文档 显示 如 下 : 


-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | 
lr-bt | rl-bt | lr 


| rl | tb 


根据 我 的 测试 〈 非 原生 下 8、IE9) ，-ms- 私 有 前 组 是 可 省 略 的 ， 


直接 用 writing-mode 所 有 下 浏 宽 絮 都 是 支持 的 。 


正 浏览 器 下 的 关键 字 值 多 达 11 个 。 


lr-tb: IE7 及 以 上 版 本 浏览 锅 文 持 。 初 始 值 。 内 容 从 无 往 右 、 从 
上 往 下 水 平流 动 ， 并 且 下 一 行 水 平 元 素 在 上 一 行 元 素 的 下 面 ， 所 
有 符号 都 是 直立 定位 。 大 部 分 书写 系统 都 使 用 这 种 布局 。 

rl-tb: IE7 及 以 上 版 本 浏览 万 文 持 。 内 容 从 右 往 左 、 从 上 往 下 水 
平流 动 ， 并 且 下 一 行 水 平 元 素 在 上 一 行 元 素 的 下 面 ， 所 有 符号 都 
征 直 立定 位 。 这 种 布局 适合 从 右 往 左 书 写 的 语言 ， 如 阿拉 伯 语 、 
希 伯 来 语 、 塔 安 那 文 和 叙利亚 语 。 

tb-r1: 卫 7 及 以 上 版 本 浏览 锅 文 持 。 内 容 从 上 往 下 、 从 右 往 左 
垂直 流动 ， 下 一 个 垂直 行 定 位 于 前 一 个 垂直 行 的 左边 ， 全 角 符号 
直立 定位 ， 非 全 角 符号 《也 可 以 称 作 罕 拉 丁 文 或 者 罕 假 名 符号 ) 
顺 时 针 方向 旋转 90"。 这 种 布局 多 见于 东亚 文字 排版 。 

bt-rl: IE7 及 以 上 版 本 浏览 锅 文 择 。 内 容 从 下 往 上 、 从 右 往 左 垂 
直流 动 ， 下 一 个 垂直 行 定 位 于 前 一 个 垂直 行 的 左边 ， 全 角 符号 直 
立定 位 ， 非 全 角 符号 〈 也 可 以 被 称 作 罕 拉丁 文 或 者 罕 假 名 符号 ) 


顺 时 针 方 癌 旋 园 90"。 此 布局 多 见于 东亚 垂直 排版 从 右 往 左 的 文本 


块 二 


tb-1r: IE8 及 以 上 版 本 浏览 器 支持 。 内 容 从 上 往 下 、 


直流 动 。 下 一 个 垂直 行 在 前 一 个 的 右边 。 


bt-lr: IE8 及 以 上 版 本 浏览 右 文 持 。 内 容 从 下 往 上 、 


直流 动 。 


lr-bt: IE8 及 以 上 版 本 浏览 锅 文 持 。 内 容 从 下 往 上 、 


于 人 W 权 SF 个 洲 二 人 条 作 且 一 TN 


rl-bt: IE8 及 以 上 版 本 浏 咒 器 支持 。 内 容 从 下 往 上 、 


平流 动 。 

lr: IE9 及 以 上 版 本 浏览 器 支持 
同 于 lr-tb。 

rl: IE9 及 以 上 版 本 浏览 器 支持 
同 于 r1-tb。 

tb: IE9 及 以 上 版 本 浏览 器 支持 
同 于 tb-rl。 


各 个 属性 值 的 表现 如 图 12-9 所 示 


从 左 往 右 垩 


从 左 往 右 三 


从 左 往 右 水 


从 右 往 左 水 


。 在 SVG 和 HTML 元 素 上 使 用 。 等 


。 在 SVG 和 HTML 元 素 上 使 用 。 等 


。 在 SVG 和 HTML 元 素 上 使 用 。 等 


Eo 


参考 微软 官网 ) 。 
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come to the aid of their country. 
Now is the time for all good men to 


.Come to the aid of their country 
Now is the time for all good men to 


图 12-9 ”下 浏览 器 下 writing-mode 各 个 属性 值 表 现 


霹 


补充 说 明 如 下 。 
。 相 同 的 writing-mode 属 性 值 并 不 会 索 加 。 例 如 ， 如 果 父 了 于 元 素 


均 设置 了 writing- mode:tb-rl1， 只 会 渲染 一 次 ， 子 元 素 并 不 
会 两 次 “旋转 ”。 

。 在 正 浏览 器 下 ， 如 果 一 个 自身 具有 布局 的 元 素 (不 是 纯 文本 之 类 
元 素 ) writing-mode 属 性 值 和 父 元 素 不 同 ， 那 么 当 子 元 素 的 布 
局 流 变化 的 时 候 ， 其 父 元 素 坐 标 系统 的 可 用 空间 会 被 充分 利用 。 
这 段 文 字 太 过 术语 化 ， 我 解释 一 下 就 是 ， 在 I 浏览 器 下 ， 当 布局 
元 素 从 水 平 变 成 垂直 的 时 候 ( 举 个 例子 ) ， 你 就 想象 为 元 素 在 牌 
直方 向 是 100% 自 适应 父 元 素 高 度 的 。 因 此 ，IE 浏 览 器 下 (不 包括 
Edge 13 及 以 上 版 本 ) ， 元 素 vertical 流 的 时 候 你 会 发 现 高 度 高 
得 吓人 ， 布 局 和 其 他 现代 浏览 器 不 一 样 ， 正 是 这 个 原因 。 

。 虽然 Chrome 和 Opera 认 识 tb -r1 等 老 的 正 属 性 值 ， 但 也 仅仅 是 认 
识 而 已 ， 并 没有 任何 实际 效果 ! 


2. 需要 关注 的 writing-mode 属 性 值 
从 直接 开发 的 角度 而 言 ， 虽 然 耻 支持 多 达 11 个 私有 的 属性 值 ， 但 
是 我 们 需要 关注 的 也 就 那么 几 个 。 究 竟 是 哪 几 个 呢 ? 


如 果 你 的 项 目 需 要 兼容 IE7， 则 只 要 关注 两 个 就 可 以 了 ， 即 初始 值 
]r-tb 和 tb-rl， 对 应 于 CSS3 规 范 中 的 horizontal-tb 和 


vertical-rl° 


如 有 果 你 的 项 目 只 需要 兼容 IE8 及 以 上 版 本 浏览 右 ， 茶 喜 你 ， 你 可 以 
和 CSS3 规 范 属 性 完全 对 应 上 了 ， 而 且 IE8 下 的 writing-mode 要 比 IE7 
强大 得 多 。 我 们 需要 关注 初始 值 Ir-tb、tb-r1 和 tb-1Lr， 分 别 对 应 
于 CSS3 中 的 horizontal-tb、vertical-rl 和 vertical-lr。 


看 上 去 复杂 的 属性 是 不 是 变 得 很 简单 了 ? 重新 整理 出 一 个 实战 
版 : 


writing-mode: lr-tb | tb-rl | tb-lr (IE8+); 


writing-mode: horizontal-tb | vertical-rl | vertical-lr; 


对 ， 大 家 只 要 记 住 上 面 这 几 个 就 可 以 了 ! 因为 所 请 的 垂直 排版 ， 
实际 Web 开 发 是 很 少 过 到 的 。 


有 人 可 能 要 有 疑问 了 : 既然 writing-mode 实 现 的 文本 垂直 排版 
场景 有 限 ， 那 么 还 有 什么 学 习 的 意义 呢 ? 


前 面 也 提 到 了 ， 虽 然 创 造 writing-mode 的 本 意 是 文本 布局 ， 但 
征 ， 其 带 来 的 文档 流 同 的 改变 ， 不 仅 改变 了 我 们 多 年 来 正 肖 的 CSS 认 
知 ， 同 时 可 以 巧妙 地 实现 很 多 意 想不到 的 需求 和 效果 。 


12.2.2 writing-mode 不 经 意 改变 了 哪些 规则 


writing-mode 将 页 面 默认 的 水 平流 改 成 了 垂直 流 ， 颠 覆 了 我 们 
以 往 的 很 多 认 知 ， 基 于 原本 水 平方 向 才 适 用 的 规则 全 部 都 可 以 在 垂直 
方向 适用 ! 下 面 所 有 案例 均 使 用 如 下 CSS 代 码 : 


.Verticle-mode { 
writing-mode: tb-ril; 
-webkit-writing-mode: vertical-rl; 


writing-mode: vertical-ril; 


1. 水 平方 向 也 能 margin 合 并 


在 CSS2 的 规范 文档 中 有 这 么 一 句 话 : “The bottom margin of an in- 
flow block-level element always collapses with the top margin of its next 


in-flow block-level sibling, unless that sibling has clearance.” 其 清 清 楚楚 


地 写 着 bottom margin 和 top margin 会 合并 。 然 而 ， 这 是 CSS2 文 
档 中 的 描述 ， 在 CSS3 中 ， 由 于 writing-mode 的 存在 ， 这 种 说 法 就 不 
严谨 了 ， 而 应 该 是 对 垂直 流 方向 的 margin 值 会 发 生 合并 。 换 句 话 

说 ， 如 果 元 素 是 默认 的 水 平流 ， 则 垂直 margin 会 合并 ， 如 果 元 素 是 

下 直流 ， 则 水 平 margin 会 合 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/12/2-1.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 12-10 所 示 。 


默认 流 -垂直 margin 合 并 


margin:20px; 


margin:20px; 


垂直 流 -水 平 margin 合 并 
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图 12-10 writing-mode 下 水 平 nargin 合 并 


2. 普通 块 元 素 可 以 使 用 margin :auto 实 现 垂直 居中 


我 们 应 该 知道 ， 默 认 的 Web 流 中 ，margin 设 置 auto 值 的 时 候 ， 
只 有 水 平方 向 才 会 居中 ， 因 为 默认 width 是 100% 自 适应 的 ，auto 才 
有 计算 值 可 依 ， 而 在 垂直 方向 ，height 没 有 任何 设置 的 时 候 高 度 绝 
不 会 自动 和 父 级 高 度 一 致 ， 因 此 auto 没 有 计算 空间 ， 于 是 无 法 实现 垂 


直 居 中。 但 是 ， 在 writing-mode 的 世界 里 ， 纵 横 规 则 已 经 改变 ， 元 
素 的 行为 表现 发 生 了 翻天 覆 地 的 变化 。 


(1) 图 片 元 素 。 


我 们 先 来 看 一 下 ， 图 片 元 素 margin:auto 实 现 垂 直 居 中 ， 手 动 
输入 http://demo.cssworld.cn/12/2-2.php 或 者 扫 右 侧 的 二 维 码 。 其 中 图 片 
的 CSS 代 码 如 下 : 


Img { 
display: block; 
margin-top: auto; margin-bottom: auto; 


Firefox 浏 览 器 中 的 效果 如 图 12-11 所 示 。 但 是 ， 在 下 浏览 器 下 ， 却 
没有 垂直 居中 ， 如 图 12-12 所 示 。 


图 12-11 writing-mode 下 图 片 垂直 居中 效果 (Firefox 浏 览 器 ) 


图 12-12 writing-mode 下 图 片 并 未 垂直 


居中 (IE 浏览 器 ) 


奇怪 ? ! 难道 IE 不 文 持 垂直 流下 的 垂直 居中 ? 非 也 ， 根 据 我 的 测 
试 ， 是 图 片 这 类 替换 元 素 狐 似 不 行 ， 普 通 的 block 元 素 都 是 可 以 的 。 


(2) 普通 块 状元 素 。 


手动 输入 http:/demo.cssworld.cn/12/2-3.php 或 者 扫 下 面 的 二 维 码 。 
此 时 ， 不 仅 正 11 Edge， 甚 至 正 8 浏 览 吉 ， 都 牌 直 居中 了 ， 如 图 12-13 所 
示 o 


3 源 管 理 器 


图 12-13 writing-mode 下 块 元 素 垂 直 居 中 1 (下 浏览 器 ) 


3. 可 以 使 用 text-align:center 实 现 图 片 垂直 居中 


前 面 提 过 ，margin:auto 无 法 实现 正 浏览 器 下 的 图 片 垂直 居 
中 ， 如 果 非 要 让 图 片 王 直 居 中 ， 可 以 使 用 text-align:center， 手 
动 输入 http:/demo.cssworld.cn/12/2-4.php 或 者 扫 下 面 的 二 维 码 。 结 果 ， 
之 前 病 恢 恢 的 下 浏览 器 活 了 ， 如 图 12-14 所 示 。 


理 器 控制 台 调试 程序 守 CD”8 


图 12-14 _ writing-mode 下 块 元 素 垂 直 居 中 2 〈 下 浏览 器 ) 
4. 可 以 使 用 text -indent 实 现 文字 下 沉 效果 


这 古 个 真实 项 目的 例子 ， 要 增加 一 个 按钮 按 下 文字 下 沉 的 效果 。 
如 果 你 来 实现 ， 你 会 怎么 做 呢 ? 行 高 控制 ? 但 默认 文本 就 不 大 中 (对 


于 高 度 自 适 应 的 按钮 ，1ine-height 下 沉 是 为 了 避免 按钮 高 度 变 
化 ， 默 认 是 不 能 完全 居中 的 ) 。padding+height 能 精确 控制 ， 又 略 
烦 。 然 而 ， 在 writing-mode 竺 直流 下 ， 我 们 又 有 了 新 思路 ， 例 如 ， 
直接 使 用 text-indent 实 现 垂 直方 向 的 控制 ， 没 想到 吧 ! 无 须 关 心 
height 高 度 、padding 间 距 大 小 ， 任 何 按钮 都 可 以 通用 ， 因 为 
text-indent 不 会 影响 元 素 原本 的 盒 布 局 。 


感 兴趣 的 读者 可 以 手动 输入 http://demo.cssworld.cn/12/2-5.php 或 者 
扫 右 侧 的 二 维 码 。 


核心 CSS 和 HTML 代 码 如 下 : 


.btn { 


.btn:active { 
text-indent: 2px; 


.Verticle-mode { 
writing-mode: tb-ril; 


writing-mode: vertical-ril; 


<a href="javascript:" class="btn verticle-mode"> 领 </a> 


此 时 ， 点 击 这 个 按钮 的 时 候 ， 文 字 束 会 往 下 一 沉 ， 非 常 有 按 下 去 
的 感觉 ， 如 图 12-15 所 示 。 


恭 襄 你 中 了 88 元 红包 ! 


图 12-15 writing-mode 下 text-indent 实 现 文字 下 沉 效果 


为 什么 有 如 此 效果 呢 ? 这 要 归功 于 中 文 。 在 垂直 流 排 版 的 时 候 ， 
中 文 不 会 旋转 ， 还 是 直立 的 。 也 就 是 说 ， 虽 然 肉 眼看 上 去 文字 没什么 
变化 ， 但 是 布局 流 已 经 发 生 了 变化 ， 以 前 类 似 text - 
indent/letter-spacing 等 水 平 控制 属性 都 作用 在 垂直 方 各 了 。 


当然 ， 这 个 例子 比较 巧 的 是 按钮 文字 只 有 一 个 ， 要 是 按钮 文字 有 
多 个 ， 怕 是 就 没 这 么 轻松 和 绝妙 了 。 


5. 可 以 实现 全 兼容 的 icon fonts 图 标的 旋转 效果 


在 老 的 正 浏览 器 下 ， 我 们 要 实现 小 图 标的 旋转 效果 是 很 麻烦 的 ， 
因为 要 使 用 正 的 旋转 或 翻转 滤 镜 什么 的 。 


有 了 writing-mode， 在 有 些 场景 下 ， 我 们 残 不 用 这 人 么 麻烦 了 。 


前 面 你 可 能 也 注意 到 了 ， 当 writing-mode 把 文档 变 成 垂直 流 的 
时 候 ， 我 们 的 英文 和 数字 符号 是 会 “ 身 着 ”显示 的 ， 也 就 是 天 然 90° 旋 转 
了 。 此 时 ， 我 们 不 妨 脑 洞 大 开 一 下 : 假如 我 们 使 用 icon fonts 技 术 让 这 
些 字 符 直接 映射 某 个 小 图 标 ， 那 吕 不 是 轻 轻 松 松 束 可 以 实现 小 图 标 旋 
转 了 ? 关键 在 于 ， 就 算是 IE6 和 IE7 浏 览 器 对 其 也 是 支持 的 ， 这 要 比 滤 
镜 什 么 的 简单 多 了 | 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/12/2-6.php 或 者 扫 右 侧 
的 二 维 码 。 


核心 CSS 和 HTML 代 码 如 下 : 


@font-face { 
font-family: Arrow; 
src: urili("/fonts/12/arrow.eot?"); 
src: local("Any"), 
url("/fonts/12/arrow.woff"); 


.icon-play { 
font-family: Arrow; 


} 


.Verticle-mode { 


writing-mode: tb-ril; 
writing-mode: vertical-rJl; 


<span class="icon-play">r</span> 箭头 朝 


<span class="icon-play verticle-mode">r</span> 箭头 朝 下 


结果 如 图 12-16 所 示 。 


加 认 流 
> 第 头 朝 右 
垂直 流 
Y 第 头 朝 下 


图 12-16 writing-mode 下 兼容 的 字体 图 标 旋 转 效 果 


可 以 看 到 ， 虽 然 正 8 不 支持 transform， 但 是 旋转 轻松 达成 。 
6. 充分 利用 高 度 的 高 度 自 适应 布局 

当 文 档 变 成 垂直 流 的 时 候 ，height 高 度 天 然 自 适 应 ， 于 是 ， 我 
们 可 以 充分 利用 高 度 的 高 度 自 适 应 布局 ..….. 突 然 发 现 ， 可 以 列举 的 案 


例 实在 太 多 了 ， 这 样 下 去 ， 本 书 没 法 完结 了 ， 所 以 往 下 的 案例 都 从 略 
了 吧 。 


总 之 ， 理 论 上 讲 ， 有 了 writing-mode， 我 们 能 够 做 的 事情 比 以 
前 多 了 很 多 。 就 怕 想 不 到 ， 不 怕 做 不 到 。 


12.2.3 writing-mode 和 direction 的 关系 


writing-mode、direction 和 unicode-bidi 是 CSS 世 界 中 
三 大 可 以 改变 文本 布局 流向 的 属性 ， 其 中 direction 和 unicode- 


bidi 属 于 近亲 ， 经 常 一 起 使 用 ， 也 是 仅 有 的 两 个 不 受 CSS3 的 alL1 属 性 
影响 的 CSS 必 性， 基本 上 就 是 和 内 联 元 素 一 起 使 用 。 它 脏 似 是 为 阿拉 
伯 文 字 设 计 的 。 


乍 一 看 ，writing-mode 似 乎 包含 了 direction 和 unicode- 
bidi 的 某 些 功 能 和 行为 ， 例 如 ，vertical-rl 的 rl 和 direction 
的 rt1l 值 有 相似 之 处 ， 都 是 从 右 往 左 。 然 而 ， 实 际 上 两 者 是 没有 交集 
有 的。 因为 vertical-rli 此 时 的 文档 流 为 王 直 方向 ,rl 表示 水 平方 
向 ， 此 时 再 设置 direction: rt1L， 实 际 上 值 rt1 改 变 的 是 垂直 方向 
的 内 联 元 素 的 文本 方向 ， 一 横 一 纵 ， 没 有 交集 。 而 有 writing-mode 
可 以 对 块 状元 素 产 生 影响 ， 直 接 改 变 了 CSS 世 界 的 纵横 规则 ， 要 比 
direction 强 大 得 多 。 它 貌似 是 为 东亚 文字 设计 的 。 


然而 ，CSS 的 奇妙 之 处 网 在 于 : 某 些 特性 当初 可 能 驶 是 为 某 些 图 
文 排版 设计 的 ， 但 是 我 们 可 以 利用 它 市 来 的 特性 发 挥 目 己 的 创造 力 ， 
实现 其 他 很 多 意 想 不 到 的 效果 。 因 此 ， 上 面 出 现 的 “三 剑客 ?都 是 非常 
好 的 资源 。 


另外，CSS 逻 辑 属 性 (也 就 是 -start/-end 属 性 ) 的 出 现 其 实 与 
现代 浏览 器 加 强 了 对 流 的 支持 有 关 ， 包 括 老 江 湖 direction， 以 及 最 
近 跟 进 的 writing-mode。 


本 书 正 文部 分 到 此 为 止 ， 感谢 阅读 ! 


[1] 大 家 会 发 现 英文 字符 横 过 来 了 ， 可 以 试 试 使 用 text- 
orientation:upright 让 其 直立 ，IE 不 支持 ，Firefox 和 Chrome 文 


持 
O 


欢迎 来 到 异步 社区 ! 


异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn) 是 人 民 邮 电 出 版 社 旗下 IT 专业 图 书 旗 
舰 社 区 ， 于 2015 年 8 月 上 线 运营 。 


异步 社区 依托 于 人 民 邮 电 出 版 社 20 余 年 的 IT 专业 优质 出 版 资源 和 
编辑 策划 团队 ， 打 造 传 统 出 版 与 电子 出 版 和 上 自 出 版 结合 、 纸 质 书 与 电 
子 书 结合 、 传 统 印 刷 与 POD 按 需 印 刷 结合 的 出 版 平台 ， 提 供 最 新 技术 
资讯 ， 为 作者 和 读者 打造 交流 互动 的 平台 。 
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社区 UI 全 新 改版 ， 产 新 面 租 迎接 20171 为 答谢 社区 用 户 


即日 起 到 | 太 A 1 r - 
1 月 26 号 ele J 书 8 扩 优惠 | 


Free eBook 
嘿 | Write for Us 
Python 机 局 学 习 一 一 预 。 贝 叶 斯 方法 ; 不 记 编程 。 ”机 器 学 习 项 目 开 发 安 战 。。” 贝 时 斯 思维 ; 统计 建 模 
测 分 析 校 心算 法 与 贝 叶 斯 准 斯 的 Python 学习 法 近期 活动 


社区 里 都 有 什么 ? 
购买 图 书 


我 们 出 版 的 图 书 涵盖 主流 芽 技术 ， 在 编程 语言 、 Web 技 术 、 数 据 科 
学 等 领域 有 众多 经 典 畅 销 图 书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 
400 多 种 ， 部 分 新 书 实现 纸 书 、 电 子 书 同步 出 版 。 我 们 还 会 定期 发 布 新 
书 书 讯 。 


下 载 资源 


社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 程序 源 代码 。 


男 外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 注册 成 为 社区 用 户 
束 可 以 免费 下 载 。 


与 作 译 者 互动 


很 多 图 书 的 作 译 者 已 经 入 驻 社区 ， 您 可 以 关注 他 们 ， 咨 询 技术 问 
题 ; 可 以 阅读 不 断 更 新 的 技术 文章 ， 听 作 译 者 和 编辑 畅 聊 好 书 背 后 有 
趣 的 故事 ;还 可 以 参与 社区 的 作者 访谈 栏目 ， 回 您 天 广 的 作者 提出 采 
访 题目 。 


灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 纸 质 图 书 直接 从 人 
民 邮 电 出 版 社 书库 发 货 ， 电 子 书 提供 多 种 阅读 格式 。 


对 于 重 磅 新 书 ， 社 区 提供 预 售 和 新 书 首发 服务 ， 用 户 可 以 第 一 时 
间 买 到 心仪 的 新 书 。 


用 户 帐户 中 的 积分 可 以 用 于 购书 优惠 。100 积 分 =1 元 ， 购 买 图 书 
时 ,在 ”PE 里 项 入 可 使 用 的 积分 数值 ， 即 可 扣 减 相应 金额 。 


ess 0 ) 


购买 本 电子 书 的 读者 专 享 异步 社区 优惠 券 。 使 用 方法 ， 注 册 成 为 社区 用 户 ， 在 下 单 购书 
时 输入 “57AWG”， 然 后 点 击 “ 使 用 优惠 码 "， 即 可 享受 电子 书 8 折 优 惠 (本 优惠 券 只 可 使 用 一 
次 ) 。 


纸 电 图 书 组 合 购买 


社区 独家 提供 纸 质 图 书 和 电子 书 组 合 购买 方式 ， 价 格 优惠 ， 一 次 
购买 ， 多 种 阅读 选择 。 
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算 机 科学 > 安全 与 加 密 > 网 站 安 全 
_ 有 上 海 
Wireshark 是 当 蔚 最 流行 的 网 阁 包 分 析 工 具 。 亡 上 手 简单 ,无 雳 培训 极 可 入 门 。 很 名 
全 手 的 网 培 / 问 是 更 到 Wireshark 都 能 迎 刀 而 解 ， 1.0K 经 验 值 
李 书 尝 远 的 网 堵 包 衬 白 真实 场 经 烘 且 接地 气 。 讲 和 解 时 漆 用 了 生活 化 区 更 多 >> rm 
Wireshatk es 2 Hie Ed) ED 
网 铬 分 煌 的 有 市 了 p 凌 文件 下 载 5.6K 57 7 信 关注 | 
间 秽 想 座 


《Wiresha 水 网 络 分 析 就 这 么 障 
单 》 吧 《Wireshark 刚 络 分 析 的 艺 
术 》 作 者 


分享 :四 富 
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电子 书 策 本 
目录 OO =O 出 版 位 所 
| 伟 下 推荐 
| 者 议 介 ”图 Nmap 梁 和 运 册 二 江南 
| 专业 书评 国 ci  : 次 广 明 
罕 提 要 外 : 


社区 里 还 可 以 做 什么 ? 


提交 勘误 


您 可 以 在 图 书页 面 下 方 提 区 勘误 ， 每 条 勘误 被 确认 后 可 以 获得 100 
积分 。 热 心 勤 误 的 读者 还 有 机 会 参与 书稿 的 审 校 和 翻译 工作 。 


写作 


性 区 提供 基于 Markdown 的 写作 环境 ， 喜 欢 写 作 的 您 可 以 在 此 一 试 
身手 ， 在 社区 里 分 享 您 的 技术 心得 和 读书 体会 ， 更 可 以 体验 目 出 版 的 
乐趣 ， 轻 松 实现 出 版 的 梦想 。 


如 有 果 成 为 社区 认证 作 译 者 ， 还 可 以 享受 异步 社区 提供 的 作者 专 享 
特色 服务 。 


会 议 活 动 早 知道 
您 可 以 掌握 代 圈 的 技术 会 议 资 讯 ， 更 有 机 会 免费 获 赠 大 会 门票 。 


加 入 异步 


扫描 任意 二 维 码 都 能 找到 我 们 : 


微 信服 务 号 


QQ 群 : 436746675 


社区 网 址 : www.epubit.com.cn 


官方 微 信 : 异步 社区 


官方 微 博 : @ 人 邮 有 异步 社区 ，@ 人 民 邮 电 出 版 社 -信息 技术 分 社 


投稿 & 咨 询 : contact@epubit.com.cn 


